Просто создайте обертку It приведет к Это зависит от того, что для заполнения: Процент вычисляется относительно ширины блока, содержащего сгенерированный блок [...] (источник: w3.org , основное внимание) Значения нижнего поля для других форматов и 100% ширины: Размещение содержимого в div: Чтобы сохранить соотношение сторон div и не позволяйте его содержимому растягивать его, вам нужно добавить абсолютно позиционированного дочернего элемента и растянуть его по краям обертки с помощью: padding-bottom
, например: div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}