Jak zachować proporcje szerokości i wysokości

Ucz się, jak używać CSS do utrzymania proporcji szerokości i wysokości elementów.

Proporcje szerokości i wysokości

Tworzenie elementów o elastycznym rozmiarze, które zachowują proporcje szerokości i wysokości (4:3, 16:9 itp.):

Co to jest proporcje szerokości i wysokości?

Proporcje szerokości i wysokości elementu opisują stosunek jego szerokości do wysokości. Dwie najczęstsze proporcje szerokości i wysokości wideo to 4:3 (standardowy format wideo w XX wieku) i 16:9 (format HD telewizji, europejskiej telewizji cyfrowej oraz wideo na YouTube).

Jak to osiągnąć - wysokość równa szerokości

Krok 1 - Dodaj HTML:

Użyj elementu kontenera, na przykład <div>Jeśli chcesz, aby zawierał tekst, dodaj element podrzędny:

<div class="container">
  <div class="text">Some text</div> <!-- Jeśli chcesz, aby w kontenerze była tekst -->
</div>

Krok 2 - Dodaj CSS:

dla padding-top Dodaj procenty, aby utrzymać proporcje szerokości i wysokości DIV. W poniższym przykładzie utworzony zostanie DIV o proporcjach szerokości i wysokości 1:1 (szerokość i wysokość zawsze są równe):

Przykład - proporcje szerokości i wysokości 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* proporcje szerokości i wysokości 1:1 */
  position: relative; /* Jeśli chcesz, aby wewnętrznie była tekst */
}
/* Jeśli chcesz, aby w kontenerze była tekst */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Spróbuj sam

Inne proporcje szerokości i wysokości

Przykład - proporcje szerokości i wysokości 16:9

.container {
  padding-top: 56.25%; /* proporcje szerokości i wysokości 16:9 (9 dzielone przez 16 wynosi 0.5625) */
}

Spróbuj sam

Przykład - proporcje szerokości i wysokości 4:3

.container {
  padding-top: 75%; /* proporcje szerokości i wysokości 4:3 (3 dzielone przez 4 wynosi 0.75) */
}

Spróbuj sam

Przykład - proporcje szerokości i wysokości 3:2

.container {
  padding-top: 66.66%; /* proporcje szerokości i wysokości 3:2 (2 dzielone przez 3 wynosi 0.6666) */
}

Spróbuj sam

Przykład - proporcje szerokości i wysokości 8:5

.container {
  padding-top: 62.5%; /* proporcje szerokości i wysokości 8:5 (5 dzielone przez 8 wynosi 0.625) */
}

Spróbuj sam

Atrybut aspect-ratio w CSS

W nowszych przeglądarkach możesz po prostu użyć CSS aspect-ratio Właściwość:

Przykład - proporcje szerokości i wysokości 3:2

.container {
  aspect-ratio: 3 / 2;
}

Spróbuj sam

Tabela liczby oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
88 88 89 15 74