Как сделать - Соотношение сторон
Узнать, как поддерживать соотношение сторон элемента с помощью CSS.
Соотношение сторон
Создавайте гибкие элементы, сохраняющие соотношение сторон (4: 3, 16:9 и т.д.) при изменении размера:
Что такое соотношение сторон?
Соотношение сторон элемента описывает пропорциональное соотношение между его шириной и высотой. Два общих соотношения сторон видео - 4:3 (универсальный формат видео 20-го века) и 16:9 (универсальный для HD - телевидения и Европейского цифрового телевидения).
Как сделать - высоту равную ширине
Шаг 1) Добавить HTML:
Используйте элемент контейнера, например <div>, и если вам нужен текст внутри него, добавьте дочерний элемент:
Пример
<div class="container">
<div class="text">Некоторый текст</div> <!-- Если вы хотите текст внутри контейнера -->
</div>
Шаг 2) Добавить CSS:
Добавить процентное значение для padding-top
, для поддержания соотношения сторон DIV. В следующем примере будет создано соотношение сторон 1: 1 (высота и ширина всегда равны):
Пример 1:1 соотношение сторон
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 соотношение сторон */
position: relative; /* Если вы хотите текст внутри него */
}
/* Если вы хотите текст внутри контейнера */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Редактор кода »Другой соотношение сторон:
Пример 16:9 соотношение сторон
.container {
padding-top: 56.25%; /* 16:9 соотношение сторон */
}
Редактор кода »Пример 4:3 соотношение сторон
.container {
padding-top: 75%; /* 4:3 соотношение сторон */
}
Редактор кода »Пример 3:2 соотношение сторон
.container {
padding-top: 66.66%; /* 3:2 соотношение сторон */
}
Редактор кода »Пример 8:5 соотношение сторон
.container {
padding-top: 62.5%; /* 8:5 соотношение сторон */
}
Редактор кода »