Div full width, TRY to maintain aspect ratio if possible, else variable height

Question

I have a div that wrap a few elements. I want the div to be 100% in width, but try to maintain aspect ratio if possible. If the wrapped elements overflow, then the height is set to auto.

<div class="wrap">
    <div>bla bla bla</div>
    <img ... />
    <span>bla bla bla</span>
    <div>test test</div>
</div>

I guess the CSS should be something like this:

.wrap {
    width: 100%;
    min-height: IQ200-auto; /* dude, try to maintain aspect ratio (2:1) if possible */
    height: auto;
}

Anyone facing this issue before?

http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css — Faust, May 04 '17 at 13:27
[http://stackoverflow.com/questions/1495407/...](http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) is **always** maintaining its aspect ratio, but I am looking for a solution that **TRY TO** respect aspect ratio, **ELSE** auto height — Boo Yan Jiong, May 04 '17 at 13:32
This is not a duplicate! Did you even read the whole question? — Joseph Marikle, May 04 '17 at 13:33
@Pete literally none of those answers use the negative margin to overcome the obvious issue with absolute positioning: namely that it takes the element out of flow, which works great if you don't want the element to ever be higher than the aspect ratio would dictate. "If you are not clever enough to see that then don't have a go at people who are." That's a great attitude to have on a site where we are supposed to be helping people that can't see what we find obvious or easy. Your fiddle would be a great example of a unique answer this very question. — Joseph Marikle, May 04 '17 at 13:46
@Pete yes, the jsfiddle is working... thanks... wow... you are fast... ^_^ — Boo Yan Jiong, May 04 '17 at 13:47
@JosephMarikle Once you have your aspect ratio div it doesn't take a genius to figure out how to put content in it and make it visible inside the div, and I'm only having a go at you because yes I did read the whole question before I voted to close it. If you don't like people being rude to you, I suggest you don't be rude in the first place - you could phrase your comment - I don't think this is a duplicate, or even just vote to reopen without a comment. Also not sure where you get the absolute positioning from, perhaps it is you that should learn to read — Pete, May 04 '17 at 13:48
@Pete I get that and I'm apologize for my comment. It was uncalled for. Not trying to be rude here either, but we are not dealing with geniuses on this site either. There's a wide range of skill here. Not everyone will be able to make the logical step from the answer you posted and the fiddle you provided, unfortunately. That takes experience and skill, which is what a lot of these users don't have and need us for. Again, I'm sorry I was rude. I don't mean to be. — Joseph Marikle, May 04 '17 at 13:53
@Pete Most of the answers on the linked question use positioning that takes the element out of flow, which is not useful in the OPs case. That's what I was talking about with the positioning. — Joseph Marikle, May 04 '17 at 13:56

score 1 · Answer 1 · answered May 04 '17 at 14:01

Here's one method I've used before. As you can tell from the linked post and Pete's fiddle, the typical method usually involves padding. The reason for this is because a percentage based padding value is always based on the width of the parent element (this is in the CSS spec). Most methods will use position:absolute on the inner wrapper to take it out of flow and force the aspect ratio. Pete's fiddle uses negative margin which will also work well because it too is based on parent width. Below is a solution that uses a floated pseudo-element using the same trick. It's 0px wide, but it has a top padding of 80%. Adding overflow:scroll (or hidden would work too) allows the parent to not "collapse". The result is that the div remains at least as tall as the floated pseudo-element.

.container {
  width: 500px;
  margin: auto;
}
img {
  max-width: 100%;
}
.wrap {
  background: #8C8;
  color: white;
  overflow: auto;
}
.wrap:before {
  content: '';
  display: block;
  padding-top: 80%;
  float: left;
  width: 0px;
}

<div class="container">
  <div class="wrap">
    <div>bla bla bla</div>
    <img src="https://placehold.it/600x300">
    <span>bla bla bla</span>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div>Content after the item</div>
  <div class="wrap">
    <div>bla bla bla</div>
    <img src="https://placehold.it/600x300">
    <span>bla bla bla</span>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    <div>Lorem ipsum dolor dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div>Content after the item</div>
</div>

Div full width, TRY to maintain aspect ratio if possible, else variable height

1 Answers1