CSS/LESS: как установить высоту div, равную 112% ширины его родителя?

У меня есть два div, div.outer и div.inner:

<div class='outer'><div class='inner'>...content...</div</div>

div.outer можно изменять размер как по ширине, так и по высоте независимо друг от друга. (Не самим пользователем.)

Внутри этого div находится div.inner, ширина которого составляет 90 % от ширины родительского блока div.outer. Этот div должен иметь соотношение сторон height / width = 1.24. Таким образом, высота должна быть в 1,24 раза больше ширины.

Другими словами, как установить высоту div, равную 112% ширины его родителя? (1.2 * 90 ≈ 112) Я ищу решение либо в Less, либо в стандартном CSS. (Только javascript/jQuery при необходимости).

Здесь в псевдо-CSS:

.outer{
    width: resizable;
    height: resizable;
}

.inner{
    width: 90%;
    height: 1.12 * width_of(.outer);
}

Заранее спасибо.


css less resizable
person Kevin    schedule 28.08.2016    source источник
comment
Возможный дубликат Can Я устанавливаю высоту div на основе ширины в процентах?   -  person Praveen Puglia    schedule 28.08.2016
comment
@PraveenPuglia Это действительно похожий вопрос. Отличие в том, что я также ищу решения с использованием Less.   -  person Kevin    schedule 28.08.2016
comment
Чистый код CSS отлично подходит для LESS. Основываясь на ответе, я не вижу причины, по которой вы не можете использовать это в своих файлах LESS.   -  person Praveen Puglia    schedule 28.08.2016
comment
Если width / height = 1.24 невозможно, чтобы высота была больше ширины   -  person    schedule 29.08.2016
comment
@blonfu Я имел в виду height / width = 1.24, мой плохой.   -  person Kevin    schedule 29.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Есть трюк, чтобы сохранить соотношение сторон div, я узнал в этом испанском блоге: https://escss.blogspot.com/2013/08/aspect-ratios-css.html

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

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.outer {
  width: 300px;
  border: solid 1px green;
}

.inner {
  border: solid 1px red;
  width: 90%;
  position: relative;
}

.inner:before {
  content: "";
  display: block;
  padding-top: 124%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
<div class="outer">
  <div class="inner">
    <div class="content">
      ... content ...
    </div>
  </div>
</div>

person Community    schedule 29.08.2016