Höhe gleich der dynamischen Breite (CSS fluid layout)

Question

Ist es möglich, die gleiche Höhe wie die Breite einzustellen (Verhältnis 1:1)?

Beispiel

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

Answer 1

[Update: Obwohl ich diesen Trick selbst entdeckt habe, habe ich inzwischen erfahren, dass Thierry Koblentz kam mir zuvor. Sie finden seine Artikel 2009 auf A List Apart. Ehre, wem Ehre gebührt].

Ich weiß, dass dies eine alte Frage ist, aber ich bin auf ein ähnliches Problem gestoßen, das ich hizo nur mit CSS lösen. Hier ist mein Blogbeitrag in der die Lösung erörtert wird. Der Beitrag enthält auch eine Live-Beispiel . Der Code wird unten wiedergegeben.

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Answer 2

Es gibt einen Weg mit CSS!

Wenn Sie die Breite in Abhängigkeit vom übergeordneten Container festlegen, können Sie die Höhe auf 0 und padding-bottom auf den Prozentsatz setzen, der in Abhängigkeit von der aktuellen Breite berechnet wird:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

Dies funktioniert in allen gängigen Browsern.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

Answer 3

Beste Methode jetzt : die aspect-ratio Eigentum (2022)

div {
  aspect-ratio : 1 / 1;
  width:50%;
  border:1px solid red;
}

<div>Aspect ratio : 1 / 1</div>

---

Andere Methode : verwenden. vw Einheiten für eine responsive Höhe/Breite entsprechend der Viewport-Breite.

vw : 1/100stel der Breite des Ansichtsfensters. ( Quelle: MDN )

DEMO

HTML:

<div></div>

CSS für ein Seitenverhältnis von 1:1:

div{
    width:80vw;
    height:80vw; /* same as width */
}

---

Tabelle zur Berechnung der Höhe entsprechend dem gewünschten Seitenverhältnis und der Breite des Elements.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

---

Diese Technik ermöglicht es Ihnen, :

• einen beliebigen Inhalt innerhalb des Elements einfügen, ohne position:absolute;
• kein überflüssiges HTML-Markup (nur ein Element)
• Anpassung des Seitenverhältnisses der Elemente an die Höhe des Ansichtsfensters unter Verwendung von vh-Einheiten
• Sie können ein responsives Quadrat oder ein anderes Seitenverhältnis erstellen, das immer in den Viewport passt, je nach Höhe und Breite des Viewports (siehe diese Antwort : Reaktionsfähiges Quadrat entsprechend der Breite und Höhe des Ansichtsfensters oder dies Demo )

Diese Einheiten werden von IE9+ unterstützt, siehe canIuse für weitere Informationen

Answer 4

Es ist auch ohne Javascript möglich :)

Das HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

Der CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

Answer 5

Mit jQuery können Sie dies erreichen, indem Sie

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Ein Arbeitsbeispiel finden Sie unter http://jsfiddle.net/n6DAu/1/