Hoe OM - Aspekverhouding
Leer hoe om die aspekverhouding van 'n element met CSS te handhaaf.
Aspekverhouding
Skep buigsame elemente wat hul aspekverhouding (4:3, 16:9, ens.) behou wanneer die grootte verander word:
Wat is aspekverhouding?
Die aspekverhouding van 'n element beskryf die proporsionele verhouding tussen sy breedte en sy hoogte. Twee algemene video-aspekverhoudings is 4:3 (die universele videoformaat van die 20ste eeu), en 16:9 (universeel vir HD-televisie en Europese digitale televisie, en verstek vir YouTube-video's).
Hoe om - Hoogte gelyk aan breedte
Stap 1) Voeg HTML by:
Gebruik 'n houerelement, soos <div>, en as jy teks daarin wil hê, voeg 'n kindelement by:
Voorbeeld
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Stap 2) Voeg CSS by:
Voeg 'n persentasiewaarde padding-top
by om die beeldverhouding van die DIV te handhaaf. Die volgende voorbeeld sal 'n aspekverhouding van 1:1 skep (die hoogte en breedte is altyd gelyk):
Voorbeeld 1:1 Aspekverhouding
.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;
}
Ander aspekverhoudings:
Voorbeeld 16:9 Aspekverhouding
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Voorbeeld 4:3 Aspekverhouding
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Voorbeeld 3:2 Aspekverhouding
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Voorbeeld 8:5 Aspekverhouding
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}