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

Äußerst einfache Methode jsfiddle

HTML

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

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

Answer 2

In Erweiterung der padding top/bottom-Technik ist es möglich, ein Pseudo-Element zu verwenden, um die Höhe des Elements festzulegen. Verwenden Sie float und negative Ränder, um das Pseudoelement aus dem Fluss und der Ansicht zu entfernen.

So können Sie Inhalte innerhalb der Box platzieren, ohne ein zusätzliches div und/oder CSS-Positionierung zu verwenden.

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}

/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}

<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Answer 3

Breite: 80vmin; Höhe: 80vmin;

CSS macht 80% der kleinsten Ansicht, Höhe oder Breite

http://caniuse.com/#feat=viewport-units

Answer 4

Eigentlich gehört das als Kommentar zu Nathans Antwort, aber das darf ich ja noch nicht...
Ich wollte das Seitenverhältnis beibehalten, auch wenn zu viel Material in die Box passt. In seinem Beispiel wird die Höhe vergrößert, wodurch sich das Seitenverhältnis ändert. Ich fand das Hinzufügen

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

zum .element beigetragen. Siehe http://jsfiddle.net/B8FU8/3111/