Сохранить пропорции элемента div по высоте

мне нужно сохранить ширина элемента в процентах от его высота. Так как высота изменяется, ширина обновляется.

противоположное достигается с помощью значения % для padding-top, но padding-left в процентах будет процентом ширины объекта, а не его высоты.

Итак, с такой разметкой:

<div class="box">
  <div class="inner"></div>
</div>

Я хотел бы использовать что-то вроде этого:

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

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

Я знаю, как достичь этого с помощью JavaScript, просто интересно, есть ли чистое решение только для CSS?

19
aspect-ratio css css3 responsive-design

4 ответов

вы можете использовать изображение, которое имеет желаемые пропорции, чтобы помочь с пропорциональным размером (изображения могут быть масштабированы пропорционально, установив одно измерение на некоторое значение, а другое на авто). Изображение не обязательно должно быть видимым, но оно должно занимать пространство.

.box {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
}
.size-helper {
  display: block;
  width: auto;
  height: 100%;
}
.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 153, .8);
}
<div class="box">
  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
  <div class="inner">
    1. box has fluid height<br>
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
    2.1 it thus maintains width = 200% of height<br>
    2.2 it defines the dimensions of the box<br>
    3. inner expands as much as box
  </div>
</div>

в приведенном выше примере box, inner и helper имеют одинаковый размер.

23

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

vh 1 / 100th высоты окна просмотра. (MDN)

демо

.box {
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;
}
<div class="box"></div>
14

CSS трюк вы написали, работает довольно хорошо, чтобы сохранить соотношение width / height на элемент. Он основан на padding свойство, которое, когда его значение в процентах, пропорционально родительской ширине, даже для padding-top и padding-bottom.

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

5

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

var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() {
  element.style.width = (element.clientHeight * aspectRatio) + 'px';
}

new ResizeSensor(element, update);
update();

демо CodePen!

0