Maintain aspect ratio of a div with dynamic height

Question

I wanted to create a square div by pure CSS what it's height is dynamic and it's width will scale base on height.

As we can see in the snipet below, the container height is dynamic base on its content. The red square take full height of the container and the width should be equal height.
I know we can maintain aspect ratio of a div base on its width but i can not find a way when the height is dynamic.

Any help would be appreciated! Thanks so much!

Note that: The height is dynamic so the solution with vh did not work and the snipet is just a playground.

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative; 
}

.square {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0; 
  background-color: red;
  
  width: 100px /*Hmm its just a dummy value*/
}

<div id="container">
  <div class="content">
    I'm a dynamic content
  </div>
  <div class="square"></div>
</div>

You can use css's calc function. https://www.w3schools.com/cssref/func_calc.asp — Lucas Rosenberger, Dec 11 '17 at 07:48
@LucasRosenberger: I know `calc()` but how do i use it to caculate width base on height? — Duannx, Dec 11 '17 at 07:52
Sorry missunderstood your question. I think you'll need to use js for this usecase. — Lucas Rosenberger, Dec 11 '17 at 07:53
@LucasRosenberger: Ya, thank you! I am just finding a pure css solution because perfomance reason. — Duannx, Dec 11 '17 at 07:57

score 2 · Accepted Answer · answered Dec 11 '17 at 08:47

2

Here is one other solution:

We can make an inner div inside the main .square div inherits its parent height.

Then, if we rotate that inner div, its height now becomes its width. So all we've got to do at this point, is to hide the overflow from the parent div, and apply some translation so it ends at the correct position.

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative;
}

.square {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.square>div {
  background-color: red;
  transform: rotate(-90deg) translate(100%, 0%);
  width: 100vw;
  height: 100%;
  transform-origin: 100% 100%;
}

<div id="container">
  <div class="content">
    <textarea> I'm a dynamic content</textarea>
  </div>
  <div class="square">
    <div></div>
  </div>
</div>

answered Dec 11 '17 at 08:47

Kaiido

123,334
13
219
285

Neat. In Firefox there's a white line to the right of the red square though. – Mr Lister Dec 11 '17 at 08:52
@MrLister ah? I made it on FF (58.b) and do not notice it. Your zoom levels are at 100%? – Kaiido Dec 11 '17 at 08:53
Yes, tested on different versions. It's OK in Chrome. – Mr Lister Dec 11 '17 at 08:58
@MrLister How weird, I tested on stable branch too, and on Nightly at different zoom levels, and can't reproduce this issue... (ran on a non-retina osX) That would be a bug in FF I guess. Can you try without the textarea? – Kaiido Dec 11 '17 at 09:00
Nice solution. I tested it in Chrome and FF. And it works fine. Just wait some hours and i will acept your answer if no one have better solution. Thank you! – Duannx Dec 11 '17 at 15:25

Mr Lister · Answer 2 · 2017-12-11T08:54:53.493

1

Here you go.

Note that I added contenteditable to the content div, so that you can type in the snippet to add lines of text to see the effect. Of course this isn't necessary in your version.

#container {
  width: 400px;
  padding: 20px;
  border: solid 1px black;
  position: relative; 
}

.square {
  position: absolute; z-index:-1;
  left:0;
  top: 0;
  right: 0;
  bottom: 0; 
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAANSURBVBhXY/jPwPAfAAUAAf+mXJtdAAAAAElFTkSuQmCC');
  background-size:contain; background-position:100% 0;
  background-repeat:no-repeat;
}

<div id="container">
  <div class="content" contenteditable="true">
    I'm a dynamic content
  </div>
  <div class="square"></div>
</div>

The trick is that the background is now a red square (it's a 1×1 image) which is sized with contain. This is not possible with background-color I'm afraid.

edited Dec 11 '17 at 08:54

answered Dec 11 '17 at 08:21

Mr Lister

45,515
15
108
150

@VXp True, but from the question I gathered that the OP just needed a red square, period. If the OP has other needs, they should mention so; then I'll see what I can do. – Mr Lister Dec 11 '17 at 08:47
well, to be fair, the OP clearly state that he `wanted to create a square div`, nice trick though – am05mhz Dec 11 '17 at 08:56
@MrLister: It is a really clever answer. But it is not what i want. My main purpose is maintain aspect ratio of the div base on its height. Nice trick but it did not solve the main problem. Anyway, thank you! – Duannx Dec 11 '17 at 15:06

Maintain aspect ratio of a div with dynamic height

2 Answers2

Linked