Поддерживать соотношение сторон div с помощью CSS

SCSS - лучшее решение в моем случае; используя атрибут данных:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

Например:

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

источник

Вы можете использовать svg. Сделайте положение контейнера / оболочки относительным, сначала поместите svg как статически расположенное, а затем поместите абсолютно позиционированное содержимое (верх: 0; слева: 0; справа: 0; снизу: 0;)

Пример с 16: 9 пропорции:

image.svg: (может быть встроено в src)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

.container {
  position: relative;
}
.content {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
}

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Обратите внимание, что встроенный svg, похоже, не работает, но вы можете urlencode svg и встроить его в атрибут img src следующим образом:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

Я нашел способ сделать это с помощью CSS, но вы должны быть осторожны, так как это может измениться в зависимости от потока вашего собственного веб-сайта. Я сделал это для того, чтобы вставить видео с постоянным соотношением сторон в жидкую часть моего сайта.

Скажем, у вас есть встроенное видео, как это:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Вы можете поместить все это в дайв с классом "видео". Этот класс видео, вероятно, будет плавным элементом на вашем сайте, так что, сам по себе, он не имеет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком сайта. Это будет элемент, в котором вы, вероятно, пытаетесь получить встроенное видео, сохраняя при этом определенное соотношение сторон видео.

Для этого я ставлю изображение перед встроенным объектом в "видео" класса div.

!!! Важной частью является то, что изображение имеет правильное соотношение сторон, которые вы хотите сохранить. Также, убедитесь в том, что размер изображения является ПОСЛЕДНЕВЫМ, как вы ожидаете, что видео (или то, что вы поддерживаете A.R.), чтобы получить на основе вашей компоновки. Это позволит избежать любых потенциальных проблем с разрешением изображения в процентном соотношении. Например, если вы хотите сохранить соотношение сторон 3:2, не используйте просто изображение 3px на 2px. Это может работать при некоторых обстоятельствах, но я не тестировал это, и, вероятно, было бы неплохо избежать этого.

Вероятно, у вас уже должна быть минимальная ширина, как эта, определенная для плавных элементов вашего сайта. Если нет, то это хорошая идея, чтобы избежать отсечения элементов или перекрытия, когда окно браузера становится слишком маленьким. Лучше иметь полоску прокрутки в какой-то момент. Наименьшая ширина, которую должна получить веб-страница, должна быть где-то около ~600px (включая любые столбцы фиксированной ширины), потому что разрешение экрана не уменьшается, если только вы не имеете дело с сайтами, дружественными к телефону. Я использую полностью прозрачный png, но я не думаю, что в конечном итоге это будет иметь значение, если вы сделаете это правильно. Например:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Теперь вы должны иметь возможность добавлять CSS аналогично следующему:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Убедитесь, что вы также удалили любое явное объявление высоты или ширины внутри объекта и вставляете теги, которые обычно поставляются с копией/вставкой embed кода.

Способ, которым он работает, зависит от свойств позиции элемента видео класса и от того, какой элемент вы хотите иметь, поддерживая определенное соотношение сторон. Он использует то, как изображение будет поддерживать правильное соотношение сторон при изменении размера элемента. Это говорит о том, что все остальное, что находится в элементе видео класса, использует все преимущества недвижимости, предоставляемой динамическим изображением, заставляя его ширину/высоту достигать 100% элемента видео класса, настраиваемого изображением.

Довольно круто, да?

Вам, возможно, придется немного поиграть с ним, чтобы заставить его работать с вашим собственным дизайном, но на самом деле это работает удивительно хорошо для меня. Общая концепция есть.

Если бы вся структура контейнера была основана на процентах, это было бы поведением по умолчанию, можете ли вы предоставить более конкретный пример?

Ниже приведен пример того, что я имею в виду, если весь ваш родитель иерархия была основана на%, любая настройка окна браузера будет работать без каких-либо дополнительных js / css, разве это не возможно с вашим макетом?

<div style="width: 100%;">
   <div style="width: 50%; margin: 0 auto;">Content</div>
</div>