Hoe - Beeldverhouding
Leer hoe u de beeldverhouding van een element kunt behouden met CSS.
Beeldverhouding
Maak flexibele elementen die hun hoogte-breedteverhouding (4:3, 16:9, enz.) behouden wanneer het formaat wordt gewijzigd:
Wat is beeldverhouding?
De aspectverhouding van een element beschrijft de proportionele relatie tussen de breedte en de hoogte. Twee veelgebruikte video-beeldverhoudingen zijn 4:3 (het universele videoformaat van de 20e eeuw) en 16:9 (universeel voor HD-televisie en Europese digitale televisie, en standaard voor YouTube-video's).
Procedure - Hoogte gelijk aan breedte
Stap 1) HTML toevoegen:
Gebruik een containerelement, zoals <div>, en als je er tekst in wilt hebben, voeg dan een onderliggend element toe:
Voorbeeld
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Stap 2) CSS toevoegen:
Voeg een procentuele waarde padding-top
toe om de beeldverhouding van de DIV te behouden. In het volgende voorbeeld wordt een beeldverhouding van 1:1 gecreëerd (de hoogte en breedte zijn altijd gelijk):
Voorbeeld 1:1 beeldverhouding
.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 beeldverhoudingen:
Voorbeeld 16:9 beeldverhouding
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Voorbeeld 4:3 Beeldverhouding
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Voorbeeld 3:2 Beeldverhouding
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Voorbeeld 8:5 Beeldverhouding
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}