Resize a Div Based on Height But Retain Aspect Ratio (Almost Got It) Strange Reload Bug

Resize a Div Based on Height but Retain Aspect Ratio (almost got it) Strange Reload bug

Good thought using an image and height: 100%. That definitely will get the box to the same aspect ratio as the image, but doesn't reflow the box on window resize for whatever reason.

Here's a demo with slightly cleaner CSS and the Javascript hack to fix the reflowing on window resize.

• Full Page Demo
• Code

In the demo, I use a 16px by 9px data uri image to set the aspect ratio, preventing a needless HTTP request. If you need a different ratio image, use this site to convert your image to a data uri: http://dataurl.net/#dataurlmaker

I managed to solve the reflowing issue with very basic jQuery. On $(window).resize(), I toggle a class on the body that makes the ratio images go from text-align: left to text-align: justify which tricks the browser into reflowing the box.

---

Browser Support

Works in Chrome, Safari, Mobile Safari, Firefox, and IE9+. The resizing is quite smooth overall, but Safari stutters a bit.

IE6/7 don't support display: inline-block so the box is 100% width and the correct height. (not a bad fallback!)

IE8 sizes the box's height correctly, but the width is only as wide as the original image (16px). The only way I found around this is using the HTML5Boilerplate style IE conditional tags to just set the embed parent to display: block like in this demo

---

CSS Only

If you have to have a CSS only solution, setting an animation on the ratio image to toggle a small amount of padding works in Chrome, Safari and Firefox. However, this is continually forcing the browser to re-render the page layout, which is grossly inefficient compared to only rendering the page layout on window resize.

.Ratio { animation: myfirst 1s infinite; }
@keyframes myfirst {
    from { padding-top: 1px; }
    to { padding-bottom: 1px; }
}

Hope that helps!

HTML / CSS Display fixed ratio images based on the height of the page

Here's where I got to.

There are fixed ratio solutions if you are basing the size of the element on width, using :before and padding-top. There's a good write up here.

There is a fixed ratio solution if you are basing the size of the element on height, however the height must be a % of the height of the screen. Written up here in another Stackoverflow question:
Resize a Div Based on Height but Retain Aspect Ratio (almost got it) Strange Reload bug

If you have a fixed pixel size header or footer and need an element to expand to fill the exact size remaining you can't do it with just HTML and CSS.

Here's a codepen.io of where I got to:
http://codepen.io/niazipan/pen/ydkGt
JS to set the image height, and CSS to style everything else around it. Code below:

HTML

<div id="overlayBg">
  <div id="overlayContainer">
    <img src="http://i.imgur.com/u9VIg60.jpg" id="yourImgId" />
  </div>
  <p>Caption</p>
</div>

CSS
html, body {
height: 100%;
text-align: center;
}

#header{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  background-color: #F00;
}

#overlayBg {
  position: fixed;
  top: 55px;
  padding: 8px;
  margin-left: auto;
  margin-right: auto;
  background: #FF0;
  position: relative;
  text-align: left;
}

#overlayContainer {
  height: 100% !important;
  width: 100%;
}

#overlayBg p {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 5px;
}

JS

var size = window.innerHeight - 120;
document.getElementById('yourImgId').style.height = size + 'px';
document.getElementById('overlayBg').style.width = size * 1.25 +'px';

Dash Plotly Graph height/width aspect ratio

This is not currently possible within the figure spec, no. You’ll have to use a responsive figure and enforce the aspect ratio in CSS (although this isn’t particularly easy in CSS either unfortunately)

---

Related Topics