Keep div height relevant to aspect ratio

css, responsive-design

Solution

I did find an answer to this. It adds a little bit of unsemantic markup, but works well. Can find it here: http://jsfiddle.net/AdQ3P/

The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.

Edit Here's the code, so not dependent on jsfiddle.

<div class="container">
  <div class="hero"></div>
</div>

.container {
  width:100%;
  max-width:500px;
}

.hero {
  width:100%;
  height:0;
  background-size:100%;
  background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
  padding-bottom:75%;
}

Also that was one messy desk i had lol.

Problem

I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas? Here's the css: ``` *{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;} body { margin:0; background-color:#fff; } .top, .body { max-width:640px; width:100%; margin:0 auto; } .top { background: white url(images/top.jpg) no-repeat; background-size:auto; overflow:hidden; height:124px; max-height:124px; } .top ul { list-style:none; height:100%; } .top ul li { height:100%; float:left; display:block; } ```

Original source