Как исправить ошибку поиска символа: неопределенные ошибки символа в кластерной среде

Просто создайте обертку

с процентным значением для padding-bottom, например:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

It приведет к

с высотой, равной 75% от ширины ее контейнера (соотношение сторон 4: 3).

Это зависит от того, что для заполнения:

Процент вычисляется относительно ширины блока, содержащего сгенерированный блок [...] (источник: w3.org , основное внимание)

Значения нижнего поля для других форматов и 100% ширины:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Размещение содержимого в div:

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

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

Вот демо и другое более подробно demo

30
задан agnussmcferguss 24 November 2014 в 23:29
поделиться