css-Breite gleich Höhe

Lesezeit: 6 Minuten

Benutzeravatar von Giorgos
Giorgos

Ich möchte den nächsten Trick in meiner CSS-Datei so machen (Höhe = Breite) ohne Pixel zu setzen. Ich möchte dies tun, unabhängig von der Auflösung des Browsers, um dieselben Werte für diese beiden Dimensionen zu haben.

#test{
    height: 100%;
    width: (same as height);
}

Ich bevorzuge es mit CSS und nicht mit Javascript.

Vielen Dank im Voraus.

  • Mögliches Duplikat dieser Frage: stackoverflow.com/questions/5445491/…

    Benutzer2012084

    15. Februar 2014 um 15:58 Uhr

  • @dpwivagg Ich glaube nicht. Das OP will width: same as height nicht height: same as width.

    – Hashem Qolami

    15. Februar 2014 um 16:00 Uhr


  • Sie können mit css nicht auf andere CSS-Anweisungen verweisen. Sie könnten weniger CSS verwenden, was Ihnen dies ermöglichen würde. lesscss.org

    – Kalvin

    15. Februar 2014 um 16:00 Uhr

  • @Hashem Qolami, ich habe es mit jquery versucht, aber das Problem ist, dass es nicht in allen Auflösungen von Smartphones funktioniert.

    – Giorgos

    15. Februar 2014 um 16:11 Uhr

Das ist mein Weg

  aspect-ratio: 1 / 1;
  height: 100%;

Beispiel:

.my-container {
  width: 100%;
  height: 150px;
  background: black;
  padding: 20px
}

.my-element {
  background: #fff;
  aspect-ratio: 1 / 1;
  height: 100%;
}
<div class="my-container">
  <div class="my-element">Height = Width</div>
</div>

  • Fantastisch! Aber können wir es nutzen? caniuse.com/mdn-css_properties_aspect-ratio – Die derzeitige Unterstützung liegt bei etwa 70%, Safari implementiert sie im Grunde noch nicht. Wenn Sie dies verwenden, wird Ihre Website auf iPhones und Safari unterbrochen. 🤷‍♂️

    – Eduard

    16. September 2021 um 9:47 Uhr

  • 100 Millionen Upvotes … Safari unterstützt dies jetzt … danke … das sollte die Top-Antwort sein

    – danday74

    2. Oktober 2021 um 21:57 Uhr

Die einzige CSS-Möglichkeit, dies im Moment zu tun (AFAIK), ist die Verwendung von Viewport-Relations-Werten (vh / vw ).

Der Support ist im Moment nicht so toll: http://caniuse.com/viewport-units aber hier ist eine kurze Demo

JSFiddle

CSS

.box {
    background-color: #00f;
    width: 50vw;
    height:50vw;
}

Die Box reagiert, bleibt aber immer quadratisch.

Rein % Werte funktionieren nicht als height:100% ist nicht gleich width:100% da sie sich auf verschiedene Dinge beziehen, die die relevanten Dimensionen des Elternteils sind.

  • Ich denke, das ist es, was ich wirklich will. Ich werde es versuchen. Danke

    – Giorgos

    15. Februar 2014 um 16:57 Uhr

  • Irgendeine Idee, wie man solche positioniert .box Element innerhalb seines übergeordneten Elements, sodass es sowohl horizontal als auch vertikal zentriert ist?

    – Michal Hosala

    1. Oktober 2015 um 18:06 Uhr

  • Auf SO gibt es viele Antworten darauf. Einfach mal suchen.

    – Paulie_D

    1. Oktober 2015 um 18:20 Uhr

  • Entschuldigung, ich hatte einen Fehler in meinem Code, dank dessen mein Favorit margin: auto; position: absolute; top, bottom, right, left: 0; Die Lösung funktionierte nicht, daher die Frage – ich habe die Schuld gegeben vw dafür.

    – Michal Hosala

    2. Oktober 2015 um 0:06 Uhr

  • @Paulie_D – für diese Frage gibt es nicht “viele Antworten”. und diese Lösung ist nicht korrekt, da sie nicht den Titel beantwortet, sondern ein sehr spezifisches Szenario beantwortet. Ich bin hierher gekommen, um eine Antwort auf den Titel zu suchen, und habe nichts bekommen :/

    – vsync

    5. Juni 2017 um 15:58 Uhr


Eine weitere Option ist zu machen Seitenverhältnis verwenden Bild Element Verhalten

Hier verwende ich SVG Bild und inline es mit Daten-URL um es einfacher zu machen

Um das gewünschte Seitenverhältnis zu beschreiben, können Sie verwenden viewBox svg-Attribut viewBox='0 0 width-ratio height-ratio'

Beispiele:

html,
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
        "Ubuntu", "Cantarell", "Fira Sans",
        "Droid Sans", "Helvetica Neue", sans-serif;
    margin: 0;
    padding: 0;
}
body {
    margin: 1rem;
}

.row {
  padding: 8px 0px;
}

.block {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-left: 8px;
  margin-right: 8px;
}

.block-content {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}

.ratio--width-to-height {
  height: 100%; 
  width: auto;
}

.ratio--height-to-width {
  height: auto; 
  width: 100%;
}
<h1>
  Block aspect ratio with svg image
</h1>

<h2>
  width to height
</h2>

<div class="row">   
  <div class="block" style="background: lime; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1</div>
  </div>

  <div class="block" style="background: cyan; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 2 1'&gt;&lt;/svg&gt;">
    <div class="block-content">2 : 1</div>
  </div>
  
  <div class="block" style="background: orange; height: 120px;">
    <img class="ratio--width-to-height" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1.25'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1.25</div>
  </div>
</div>

<h2>
  height to width
</h2>

<div class="row">   
  <div class="block" style="background: lime; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1</div>
  </div>

  <div class="block" style="background: cyan; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 2 1'&gt;&lt;/svg&gt;">
    <div class="block-content">2 : 1</div>
  </div>
  
  <div class="block" style="background: orange; width: 120px;">
    <img class="ratio--height-to-width" 
    src="data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 1 1.25'&gt;&lt;/svg&gt;">
    <div class="block-content">1 : 1.25</div>
  </div>
</div>

Dasselbe Beispiel auf Codepen https://codepen.io/forceuser/pen/MMWBBx

  • Bitte klären Sie die Verwendung von “html”, ich konnte es weder in W3School noch in irgendeiner anderen Dokumentation finden

    – vikramvi

    9. Juli 2020 um 10:34 Uhr

  • Für alle, die wegen des Fragetitels hierher gekommen sind, ist dies die Antwort, nach der Sie suchen. Sie verwenden ein untergeordnetes Bild-Tag mit einem Verhältnis von 1:1 und machen die Breite des übergeordneten Auto-Tags. Für die Leute, die aus Unwissenheit “mögliches Duplikat” posten, ist es kein Duplikat, da der prozentuale Polsterungstrick auf die Breite des Elternteils und nicht auf die Höhe geht. Es funktioniert also nur, wenn Sie versuchen, die Höhe an die Breite anzupassen, nicht umgekehrt

    – DanceSC

    10. Mai 2021 um 18:53 Uhr


  • Die Eigenschaft Seitenverhältnis ist technisch der beste Weg, wird aber nur in neueren Versionen einiger Browser unterstützt. Dieser ist im Moment der Beste.

    – SRCP

    12. Dezember 2021 um 21:58 Uhr


maximale Breite / maximale Höhe hat bei mir funktioniert:

Ein Bild bestimmter Größe wird in ein div (.box) gesetzt.

.parent {
       position: absolute;
}

.box {
    width: 100%;
    height: 100%;
}

.box img {
   max-width: 100%;
   max-height: 100%;
}

1445440cookie-checkcss-Breite gleich Höhe

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy