2

I have two divs, div.outer and div.inner:

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

div.outer can be resized, both width and height independently. (Not by the user him-/herself.)

Inside this div is div.inner with a width of 90% that of its parent div.outer. This div has to have a aspect ratio of height / width = 1.24. So the height must be 1.24 times larger than the width.

In other words, how do you set the height of a div equal to 112% the width of it's parent? (1.2 * 90 ≈ 112) I'm looking for a solution in either Less or standard CSS. (Only javascript/jQuery if necessary).

Here in pseudo-CSS:

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

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

Thanks in advance.

Kevin
  • 685
  • 1
  • 7
  • 16
  • Possible duplicate of [Can I set the height of a div based on a percentage-based width?](http://stackoverflow.com/questions/10062811/can-i-set-the-height-of-a-div-based-on-a-percentage-based-width) – Praveen Puglia Aug 28 '16 at 16:24
  • @PraveenPuglia It's a similar question indeed. What's different is that I'm also looking for solutions using Less. – Kevin Aug 28 '16 at 16:26
  • A pure CSS code is perfectly fine for LESS. Based on the answer there, I don't see a reason, why you can't use that in your LESS files. – Praveen Puglia Aug 28 '16 at 16:28
  • If `width / height = 1.24` it's impossible that the height is larger than the width –  Aug 29 '16 at 07:03
  • @blonfu I meant `height / width = 1.24`, my bad. – Kevin Aug 29 '16 at 11:53

1 Answers1

0

There is a trick to maintain the aspect ratio of a div, I learn in this spanish blog: https://escss.blogspot.com/2013/08/aspect-ratios-css.html

You have to add an extra div but maybe is useful for you or a first step to get a solution:

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>