Как сделать - пропорции элемента
Узнайте, как сохранить пропорции элемента с помощью CSS.
Пропорции
Создание гибких элементов, которые держат их пропорции (4:3, 16:9 и т.д.) при изменении размера:
Что такое соотношение сторон?
Соотношение сторон элемента описывает пропорциональную связь между его шириной и высотой. Два распространенных видео пропорции являются 4:3 (универсальный формат видео 20-го века), и 16:9 (универсальный для HD телевидения и Европейского цифрового телевидения).
Как-высота равна ширине
Шаг 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 */
}
Пример 4:3 пропорции
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Пример 3:2 пропорции
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Пример 8:5 пропорции
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}