Как задать блоку пропорции?

Question

[Кирилл Жиляев]

Можно ли div блоку задать через css пропорции? Например 1:2? Размеры в процентах.

Answer 1

[Serg Bakay]

можно:
width:100%;
heigth:0;
padding-top:200%;

Comments

[Александр Моргунов]

Эм, решение никуда не годится, если в блоке будет контент.

[Serg Bakay]

можно через vw-единицы измерения (соотношение к ширине вьюпорта) вот так например:
width:20vw;
heigth:40vw;

Answer 2

[Михаил Захаров]

Вообще такого решения нет. Но обычно делают следующее:
В блок вставляют картинку с нужной пропорцией. Например, 1 на 2 пикселя. Соответственно, если картинке задать ширину в 1000 пикселей, то её высота будет равна 500. Именно эти размеры и будут у родительского блока.

Comments

[Михаил Захаров]

Картинка, естественно, прозрачный png.

[Михаил Захаров]

Кирилл Жиляев: нет. Просто в этот блок засунуть <img src="/pixel.png"/> )

Answer 3

[Александр Моргунов]

В данном случае я бы все сделал через JS. Взять уже заданную в css ширину блока и умножив на нужный ratio добавил бы свойство height.

Comments

[Serg Bakay]

то-есть это решение годится если внутри будет контент?!

Answer 4

[Ankhena]

https://jsfiddle.net/Ankhena/cLhxv7eq/

<div class="wrap">
  <div class="content">Какой-то текст</div>
</div>

.wrap {
  position: relative;
  width: 50%;
  //height: auto;
  margin: 20px auto;
  background: #eee;
}
.wrap::after {
  content: '';
  display: block;
  padding-top: 100%; /*установите ваши пропорции, в данном случае квадрат*/
  width: 1px; /*ширина только для наглядности - УДАЛИТЕ*/
  background: #f00; /*фон только для наглядности - УДАЛИТЕ*/
}
.content {
   position: absolute;
   background: #555;
   top: 0;
   left: 0;
   bottom: 0;
    right: 0;
}