crosheresui
New Member
My goal is to show an image (or other content) in a div with fixed aspect ratio, which has a maximum width, but will scale down if necessary. The following jsFiddle shows, what I have got so far. It does work fine for IE8. In Firefox and Chrome the inner div does not fully fill the outer div, there is a small gap at the bottom. Safari shows a wrong aspect ratio. http://jsfiddle.net/ywyQQ/2/\[code\] <!doctype html><html><head><title>Fixed Aspect Ratio</title><style>.keepaspect{ position: relative; max-width: 750px; margin: auto; /* Box Shadow */ -moz-box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; /* For IE 8 */ /* For IE 5.5 - 7 */ behavior: url(http://localhost/PIE.php);}.inner{ width: 100%; padding: auto; display: block;}</style></head><body> <div class="keepaspect inner"> <img src=http://i42.tinypic.com/21e18cx.jpg width='100%' height='100%'> </div></body></html>\[/code\]How can I set it up, so it is cross-browser-friendly and in a way, that it always fills the outer div?Here is a fully working example, but it is based on the img tag, which I can't use. The content is not necessarily an img. http://jsfiddle.net/gMUkE/2/\[code\] <!doctype html><html><head><title>Fixed Aspect Ratio</title><style>#container{ position: relative; min-width: 300px; max-width: 750px; margin: auto;}#container img{ width: 100%; margin: auto; position: relative; display: block; /* Box Shadow */ -moz-box-shadow: 0px 0px 10px #000; -webkit-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; /* For IE 8 */ /* For IE 5.5 - 7 */ behavior: url(http://localhost/PIE.htc);}.content{ width: 100%; height: 100%; /*optional in case the poster image has exact aspect ratio*/ position: absolute; z-index: 1;}</style></head><body> <div id=container> <img src=http://i42.tinypic.com/21e18cx.jpg> </div></body></html>\[/code\]