Jak na to - Poměr stran
Naučte se, jak zachovat poměr stran prvku pomocí CSS.
Poměr stran
Vytvářejte flexibilní prvky, které si při změně velikosti zachovají svůj poměr stran (4:3, 16:9 atd.):
Co je poměr stran?
Poměr stran prvku popisuje proporcionální vztah mezi jeho šířkou a výškou. Dva běžné poměry stran videa jsou 4:3 (univerzální formát videa 20. století) a 16:9 (univerzální pro HD televizi a evropskou digitální televizi a výchozí pro videa na YouTube).
Jak na to - Výška se rovná šířce
Krok 1) Přidejte HTML:
Použijte prvek kontejneru, například <div>, a chcete-li do něj text, přidejte podřízený prvek:
Příklad
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Krok 2) Přidejte CSS:
Přidejte procentní hodnotu pro padding-top
, abyste zachovali poměr stran DIV. Následující příklad vytvoří poměr stran 1:1 (výška a šířka jsou vždy stejné):
Příklad 1:1 Poměr stran
.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;
}
Další poměry stran:
Příklad 16:9 Poměr stran
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Příklad 4:3 Poměr stran
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Příklad 3:2 Poměr stran
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Příklad 8:5 Poměr stran
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}