Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?
So I'm using background-size:cover to achieve the desired effect of a background image that scales to any size of the div it's applied to while maintaining the aspect ratio. Why use this method? The image is being applied as the background using inline CSS, dynamically through PHP, based on what's being set as the image in the correlating WordPress post.
So everything works great, but is there any fallback to ensure this'll work in at least IE8? Possibly some Javascript fixes?
Already tried backstretch and supersized, but to no avail, since they apply the images only to the background of the page.
You can see it in action over here.
Answer
In IE8 or below, a foreground image inserted as the child of a div with defined width/height would be the only workaround:
<!doctype html>
<html lang="en">
<head>
<title>Dynamic Image Sizing</title>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; text-align:left; }
#pseudobg { position:absolute; z-index:1; width:100%; height:100%; }
#scroller { position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2; }
#dyndiv { position: absolute; left: 50%; width: 200px; height: 300px; }
</style>
</head>
<body>
<div id="scroller">
<!-- Insert your content here -->
<div id="dyndiv">
<img id="pseudobg" src="http://www.stackoverflow.com/favicon.ico" alt="" title="" />
</div>
</div>
</body>
</html>
If that is not equivalent, ask Stu Nicholls for further help.
Demo:
