Gewusst wie: Seitenverhältnis
Erfahren Sie, wie Sie das Seitenverhältnis eines Elements mit CSS beibehalten.
Seitenverhältnis
Erstellen Sie flexible Elemente, die ihr Seitenverhältnis (4:3, 16:9 usw.) bei einer Größenänderung beibehalten:
Was ist das Seitenverhältnis?
Das Seitenverhältnis eines Elements beschreibt das proportionale Verhältnis zwischen seiner Breite und seiner Höhe. Zwei gängige Video-Seitenverhältnisse sind 4:3 (das universelle Videoformat des 20. Jahrhunderts) und 16:9 (universal für HD-Fernsehen und europäisches Digitalfernsehen und Standard für YouTube-Videos).
Gewusst wie - Höhe gleich Breite
Schritt 1) HTML hinzufügen:
Verwenden Sie ein Containerelement wie <div>, und wenn Sie Text darin haben möchten, fügen Sie ein untergeordnetes Element hinzu:
Beispiel
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Schritt 2) CSS hinzufügen:
Fügen Sie einen Prozentwert hinzu padding-top
, um das Seitenverhältnis des DIV beizubehalten. Das folgende Beispiel erzeugt ein Seitenverhältnis von 1:1 (Höhe und Breite sind immer gleich):
Beispiel 1:1 Seitenverhältnis
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Andere Seitenverhältnisse:
Beispiel 16:9 Seitenverhältnis
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Beispiel 4:3 Seitenverhältnis
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Beispiel 3:2 Seitenverhältnis
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Beispiel 8:5 Seitenverhältnis
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}