Изменения в размере браузера могут создавать искажения элементов и влиять на способ отображения содержимого внутри. Поэтому иногда важно поддерживать соотношение сторон контейнера div. Это можно сделать с помощью CSS3, что изменение высоты контейнера div пропорционально изменению ширины. Это также может быть сделано в JavaScript, хотя маршрут CSS3 может быть предпочтительнее.
Важно решить, требуется ли соотношение сторон, где перевести это в процентное значение. Вот некоторые из наиболее распространенных форматов изображения с соответствующим процентным значением, которое будет использоваться.
16:9 = 56.25%
4:3 = 75%
3:2 = 66.66%
8:5 = 62.5%
CSS3 код для формата DIV
Код CSS3 для поддержания соотношения сторон 3: 2 выглядит следующим образом:
Код
div {
width: 100%;
padding-bottom: 66.66%;
background:red;
}
Фон был установлен на красный только для иллюстрации.
Тем не менее, содержимое внутри содержимого внутри div может растянуть его, и этого можно избежать, добавив дочерний элемент с установленным абсолютным положением и растянутыми к краям оболочки. Код CSS3 для этого выглядит следующим образом:
Код
div.stretch-wrapper {
position: relative;
}
div.stretch-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Альтернативный вариант
Есть и другой способ решения той же проблемы поддержания соотношения сторон. В этом случае соотношение сторон div можно установить по ширине области просмотра или высоте области просмотра. Следующие множители будут использоваться для расчета единиц просмотра.
- Соотношение сторон 1:1, умножьте единицы просмотра на 1
- Соотношение сторон 1:3, умножьте единицы просмотра на 3
- Соотношение сторон 4:3, умножьте единицы просмотра на 0,75
- Соотношение сторон 16:9, умножьте единицы просмотра на 0,5625
Вот код CSS3 для поддержания соотношения сторон в соответствии с шириной области просмотра или высотой области просмотра.
Код
div{
width: 20vw;
height:20vw;
background:red;
}
Фон был установлен на красный только для иллюстрации.
Это может быть более точный вариант и предпочтительный маршрут, тем более что единицы просмотра окна поддерживаются большинством браузеров.
Демонстрация
Пример: квадратная квадратная сетка
Этот способ делается с помощью CSS, но вы должны быть осторожны, потому что это может варьироваться в зависимости от потока вашего сайта.
HTML
Код
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
CSS
Код
body{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
div {
width:23vw;
height:23vw;
margin:0.5vw auto;
background:gold;
}
Возможно, вам придется немного самостоятельно редактировать, чтобы поработать над собственным дизайном, но он действительно работает для меня на удивление хорошо.
Демонстрация
