CSS div Seitenverhältnis?

Hi,

ich möchte gerne responsive Quadrate auf der HTML Seite haben. In die Breite funktioniert das super mit width: 50%;. Was aber muss ich machen, damit das Seitenverhältnis immer 1:1 bleibt und die Rechtecke je nach Browser-Größe auch wirklich Quadrate bleiben?

Answer 1

[Dory1]

html

<div class="box">Inhalt</div>
<div class="box">Inhalt</div>

css

.box {
  width: 50%;
  float: left;
  height: 0;               // Hier ist
  padding-bottom: 50%;     // der Hack :)
}

Demo: http://codepen.io/anon/pen/dOPPrz

Comments

[RakonDark]

wobei das jetzt gerade bei codepen etwas lustig aussieht , :)

und mit den nachfolge elementen das bei padding etwas kritisch wird ohne weitere hacks zu benutzen .

[Dory1]

@RakonDark

Kommt halt drauf an was der Fragesteller überhaupt beabsichtigt. Mir fällt zumindest auf Anhieb keine andere Lösung ein, die auf reinem CSS basiert.

[abbrechen]

Kommt auf den Inhalt an. padding klappt ganz gut, solange eine childs drin sind. Bei Bildern muss einfach das Bild quadratisch sein. Bei Text wird es tricky. Da empfiehlt es sich weniger, mit Prozenten zu arbeiten, weil man einfach die Höhe angeben muss. Möchte man die 50% aber beibehalten, height: 50%, nach dem
man html und body auf 100% gestellt hat. Aber bei einem Textfeld bietet es sich eher an, einen pixelbasierten Container zu nehmen, der in einem geflexten Parent liegt.

Answer 2

[kuechentiger]

.aussen {
    display:inline-block;
    position:relative;
    width:50%;
    float:left
}
.leer {margin-top:100%}/*verhältnis 1:1 1x1x100*/

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

<div class="aussen">
<div class="leer"></div>
<div class="inhalt"></div>
</div>
<div class="aussen">
<div class="leer"></div>
<div class="inhalt></div>
</div