Как сделать - Соотношение сторон
Узнайте, как сохранить соотношение сторон элемента с помощью CSS.
Соотношение сторон
Создавайте гибкие элементы, сохраняющие соотношение сторон (4:3, 16:9 и т. д.) при изменении размера:
Что такое соотношение сторон?
Соотношение сторон элемента описывает пропорциональное соотношение между его шириной и высотой. Два распространенных соотношения сторон видео: 4: 3 (универсальный видеоформат 20-го века) и 16: 9 (универсальный для HD-телевидения и европейского цифрового телевидения, а также по умолчанию для видео на YouTube).
Как сделать - высота равна ширине
Шаг 1) Добавьте HTML:
Используйте элемент-контейнер, например <div>, и если вам нужен текст внутри него, добавьте дочерний элемент:
Пример
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
Шаг 2) Добавьте CSS:
Добавьте процентное значение padding-top
, чтобы сохранить соотношение сторон DIV. В следующем примере будет создано соотношение сторон 1:1 (высота и ширина всегда равны):
Пример 1:1 Соотношение сторон
.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;
}
Другие соотношения сторон:
Пример 16:9 Соотношение сторон
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
Пример 4:3 Соотношение сторон
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
Пример 3:2 Соотношение сторон
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
Пример 8:5 Соотношение сторон
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}