Jak TO - Współczynnik proporcji
Dowiedz się, jak zachować proporcje elementu za pomocą CSS.
Współczynnik proporcji
Twórz elastyczne elementy, które zachowują proporcje (4:3, 16:9 itd.) po zmianie rozmiaru:
Co to jest proporcje?
Współczynnik proporcji elementu opisuje proporcjonalną relację między jego szerokością a wysokością. Dwa popularne współczynniki proporcji wideo to 4:3 (uniwersalny format wideo XX wieku) i 16:9 (uniwersalny dla telewizji HD i europejskiej telewizji cyfrowej oraz domyślny dla filmów na YouTube).
Jak to zrobić — wysokość równa szerokości
Krok 1) Dodaj kod HTML:
Użyj elementu kontenera, takiego jak <div>, a jeśli chcesz umieścić w nim tekst, dodaj element potomny:
Przykład
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Krok 2) Dodaj CSS:
Dodaj wartość procentową, padding-top
aby zachować proporcje DIV. Poniższy przykład utworzy proporcje 1:1 (wysokość i szerokość są zawsze równe):
Przykład 1:1 Współczynnik proporcji
.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;
}
Inne proporcje:
Przykład 16:9 Współczynnik proporcji
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Przykład 4:3 Współczynnik proporcji
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Przykład 3:2 Współczynnik proporcji
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Przykład 8:5 Współczynnik proporcji
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}