CSS: div Breite proportional zur Höhe macht

Question

Dies ist ein wenig schwierig zu erklären, aber: Ich möchte eine ansprechende Höhe div (height: 100%), der die Breite proportional zur Höhe (nicht umgekehrt) skaliert.

Ich kenne this method mit einem padding-top Hack, um die Höhe proportional zur Breite zu machen, aber ich brauche es anders herum zu arbeiten. Abgesehen davon, bin ich nicht besonders scharf auf die zusätzliche Anforderung von absolut positionierten Elementen für den Inhalt dieser Methode, also merke ich, dass ich hier durchaus nach dem Mond fragen kann.

sichtbar zu machen, hier zu helfen, ist ein Bild:

... und hier ist ein jsFiddle, so ziemlich die gleiche Sache darstellt.

Es ist erwähnenswert, dass ich bereits die :before und :after pseudo-Elemente vertikal ausrichten, den Inhalt der Box I proportional skalieren möge verwenden.

Ich würde wirklich, wirklich genießen nicht zu jQuery zurückkehren müssen, nur weil es eine inhärente Voraussetzung für Resize-Handler sein wird und generell rundum Debuggen ... aber wenn das ist meine einzige Wahl, dann fiat.

Answer 1

Ich frage mich seit einiger Zeit über eine pure-css-Lösung für dieses Problem. Ich kam schließlich mit einer Lösung unter Verwendung von ems auf, die schrittweise mit vws verbessert werden können:

Siehe codepen Link für volle Arbeits Demo und Erläuterung:

http://codepen.io/patrickkunka/pen/yxugb

Vereinfachte Version:

.parent { 
    font-size: 250px; // height of container 
    height: 1em; 
} 

.child { 
    height: 100%; 
    width: 1em; // 100% of height 
} 

Answer 2

Oh, Sie könnten wahrscheinlich diesen "Padding-Top" Trick verwenden.

width: 50%; 
height: 0; 
padding-bottom: 50%; 

http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares

Oder:

.square-box{ 
    position: relative; 
    width: 50%; 
    overflow: hidden; 
    background: #4679BD; 
} 
.square-box:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; 
} 

http://codeitdown.com/css-square-rectangle/

Die vertikale padding in CSS an die Breite des Elements verbunden ist, nicht die Höhe.

Answer 3

Basierend auf der Antwort von @ kunkalabs (was wirklich schlau ist) habe ich eine Lösung gefunden, mit der Sie die ererbte Schriftgröße beibehalten können.

HTML:

<div id='rect'> 
    <div id='content'>Text</div> 
</div> 

CSS:

#rect { 
    font-size: 1000%; 
    height: 1em; 
    width: 1em; 
    position: relative; 
} 

#content { 
    font-size: 10%; 
} 

Also im Grunde die Schriftgröße von #content ist (100/$ rectFontSize) * 100 Prozent des Rechtecks.Wenn Sie eine bestimmte Pixelgröße für das Rechteck benötigen, können Sie die Schriftgröße des übergeordneten Elements #rect einstellen ... ansonsten passen Sie einfach die Schriftgröße an, bis sie an der Stelle ist, an der Sie sie haben möchten (und Ihren Designer dazu verärgern).

Answer 4

Lassen Sie das übergeordnete DIV sich wie eine Tabellenzelle verhalten und richten Sie das untergeordnete Element vertikal aus. Sie müssen keine Padding-Tricks machen.

HTML

<div class="parent"> 
<img src="foo.jpg" /> 
</div> 

CSS

.parent { width:300px; height:300px; display:table-cell; vertical-align:middle; } 

Answer 5

Die Schrift Lösung erfordert, dass die Höhe bekannt ist. Ich habe eine Lösung gefunden, um ein Element innerhalb eines Elternteils mit unbekannter Breite und Höhe proportional zu machen. Here is a demo.

Der Trick, den ich verwende, ist ein Bild als Spacer verwendet werden. Der Code erklärt:

<div class="heightLimit"> 
<img width="2048" height="2048" class="spacer" 
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAA 
     P///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
<div class="filler"> 
    <div class="proportional"> 
    </div> 
</div> 
</div> 

So ist es nicht das schönste mit zwei extra Divs und ein nutzloses Bild. Aber es könnte schlimmer sein. Das Bildelement muss Breite und Höhe mit den gewünschten Abmessungen haben. Breite und Höhe müssen so groß sein wie die maximal zulässige Größe (ein Feature!).

Die CSS:

.heightLimit { 
position: absolute; 
top: 0; 
left: 0; 
height: 100%; 
width: auto; 
max-width: 100%; 
overflow: hidden; 
} 

Dieses Element ist um die Höhe zu begrenzen, sondern horizontal (width: auto), obwohl niemals über die parent (max-width) zu erweitern. Der Überlauf muss ausgeblendet werden, da einige Kinder aus dem div herausragen werden.

.spacer { 
width: auto; 
max-height: 100%; 
visibility: hidden; 
} 

Dieses Bild ist unsichtbar, und proportional zu der Höhe skaliert, während die Breite eingestellt wird, und drückt die Breite der übergeordneten auch angepasst werden.

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

Dieses Element wird benötigt, um den Raum mit einem absolut positionierten Container zu füllen.

.proportional { 
position: relative; 
width: 100%; 
height: 0; 
padding-bottom: 100%; 
} 

Und hier bekommt unser proportionales Element eine Höhe proportional zur Breite mit dem bekannten Padding-Bottom-Trick.

Leider gibt es einen Fehler in Chrome und IE. Wenn Sie also das übergeordnete Element mit Javascript ändern, wie in meiner Demo, werden die Dimensionen nicht aktualisiert. Es gibt einen Hack, der angewendet werden kann, um das zu lösen, wie in meiner Demo gezeigt.