Как сохранить соотношение сторон (aspect ratio) div с помощью CSS
Я хочу создать div, который может изменять свою ширину / высоту при изменении ширины окна.
Существуют ли какие-либо правила CSS3, позволяющие изменять высоту в соответствии с шириной при сохранении соотношения сторон?
Я знаю, что могу сделать это с помощью JavaScript, но я бы предпочел использовать только CSS.
Свободный перевод вопроса Maintain the aspect ratio of a div with CSS от участника @ackb.
Ответы (3 шт):
vw units:
Вы можете использовать единицы vw как для ширины, так и для высоты элемента. Это позволяет сохранить соотношение сторон элемента в зависимости от ширины области просмотра.
vw : 1/100th от ширины viewport(области просмотра). MDN
В качестве альтернативы вы также можете использовать vh для высоты viewport (окна просмотра) или даже
vmin / vmax для использования меньшего / большего размера окна просмотра (обсуждение здесь).
Пример: 1:1 aspect ratio
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>Для других соотношений сторон вы можете использовать следующую таблицу, чтобы вычислить значение высоты в соответствии с шириной элемента:
aspect ratio | умножить ширину на
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Пример: квадратная сетка 4x4.
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}<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>Вы можете добиться этого с помощью SVG.
Это зависит от случая, но в некоторых это действительно полезно. В качестве примера - вы можете установить background-image без установки фиксированной высоты или использовать его для встраивания youtube <iframe> с соотношением сторон 16: 9, position:absolute и т. д.
Для соотношения 3: 2 установите viewBox = "0 0 3 2" и так далее.
Пример:
div{
background-color:red
}
svg{
width:100%;
display:block;
visibility:hidden
}
.demo-1{width:35%}
.demo-2{width:20%}<div class="demo-1">
<svg viewBox="0 0 3 2"></svg>
</div>
<hr>
<div class="demo-2">
<svg viewBox="0 0 3 2"></svg>
</div>div {
width: 100%;
aspect-ratio: 4 / 3;
}
Что бы работало нужно что бы либо высота, либо ширина имели значение auto, а другая сторона имела точное значение, например width: 100%/100px и т.д.