The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Solution 1: Fluid Container Height Based on its Background Image Height
Whether you have this kind of question or not, this might be a solution to make fluid container height to follow it’s background image height. Same with the technique to make a fluid height video with pure CSS ⇒ http://alistapart.com/article/creating-intrinsic-ratios-for-video
Set the container height to `0` and create a large bottom (or top) padding based on it’s background image ratio to fake the container height:
background:yellow url('img/400x150.jpg') no-repeat 50% 0;
padding-top:37.5%; /* `150/400 × 100` */
Hacky but works ⇒ http://codepen.io/tovic/pen/ewxcv
I’ve used something like that to create responsive animated sprites :) http://codepen.io/CrocoDillon/pen/ekuxb