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.

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:

I've tried the answer before and it did not work as background-size: cover; is expected, it did in fact fit the image into the size chosen , but it did not clip the excess to the new measures which is what i expected from "cover" option. My solution was found here : http://selectivizr.com/

<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="[JS library]"></script>
 <!--[if (gte IE 6)&(lte IE 8)]>
   <script type="text/javascript" src="path/to/selectivizr.js"></script>
   <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
 <![endif]--> 

<style>
  .with-bg-size


    {
        background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
        background-position: center;
        /*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img1.jurko.net/wall/paper/donald_duck_4.jpg',sizingMethod='scale'); 
it didnt work as cover is expected */
        width: 200px;
        height: 100px;


        /* Make the background image cover the area of the <div>, and clip the excess */
        background-size: cover;

      }


    </style>
    <body>

<div class="with-bg-size">Donald Duck!</div>

</body>
</html>

If you need to shrink the size of your image, rather than grow it, this approach doesn't work. The best approach I've found avoiding Javascript is superimpose two images on top of each other, on hover make the top one transparent. All other approaches involving resizing the originals (eg, background-size) seem to fail in IE.

CSS:

.social-btn-container {
    width:46px;
    height:46px;
    position:relative;
    float: left;
    margin-right: 15px;
}   
.social-btn-container:hover > .top-btn {
    visibility:hidden;
}
.social-btn {
    margin:0;
    padding:0;
    border:0;
    width: 46px;
    height: 46px;
    position: absolute;
    left:0;
    top:0;
}   
.top-btn {
    z-index: 1;
}
.top-btn:hover {
    opacity: 0;
}

HTML:

<div class="social-btn-container">
    <a href="http://www.facebook.com/comunidadintiwarayassi" target="_blank" title="follow us on facebook">
        <img src="images/icons/facebook_top.png" class="top-btn social-btn" />
        <img src="images/icons/facebook_bottom.png" class="social-btn" />
    </a>
</div>

The .social-btn-container:hover > .top-btn part gets this working in IE quirks mode, which doesn't seem to support opacity, and if you use :hover{visibility:hidden} hover becomes false when visibility becomes hidden, causing flickering. (The outer div also positions the images.) I've tested this in FF23, IE standards and quirks (getting IE 10 to emulate 7, 8 and 9), Opera and Safari.

In IE8 or below use separated the background: code:

-webkit Example:

background: url('img/habesha.jpg') no-repeat center center;
-webkit-background-size: cover;

- in IE try:

background-image:url('img/bright_switch.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 100% 100%;

More details here: https://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx

来源：https://stackoverflow.com/questions/9330733/good-background-size-cover-fallbacks-shims-tricks-for-cross-browser-compatibi

标签

javascript

css3

fallback

css

shim