Поддерживать соотношение сторон в соответствии с высотой

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

Противоположность достигается с использованием значения% для 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?

Ответ 1

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

.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>

Ответ 2

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

В.Х. 1/100-й высоты окна просмотра. (MDN)

DEMO

.box {
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;
}

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

Ответ 3

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

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

Ответ 4

Я не могу найти чистое решение CSS. Здесь решение с использованием CSS Element Queries Библиотека 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!

Ответ 5

Существует еще один, более эффективный способ достижения постоянного соотношения сторон в зависимости от высоты.

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

HTML-код:

    <svg xmlns="http://www.w3.org/2000/svg"
      height="100"
      width="200"
      class='placeholder-svg'
    />

CSS-код:

.placeholder-svg {
  width: auto;
  height: 100%;
}

Измените ширину/высоту для достижения желаемого соотношения сторон.

Имейте в виду, что svg может переполниться.

http://www.w3.org/2000/svg это просто пространство имен. Он ничего не загружает.

Если вы измените класс placeholder-svg на:

.placeholder-svg {
  width: 100%;
  height: auto;
}

Затем высота регулируется в соответствии с шириной.

Демонстрация 1 Ширина регулируется в соответствии с высотой и соотношением сторон 2: 1.

Демо-версия 2 такая же, как и выше, но вы можете легко изменить ее размер (использует React)