javascript - Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?

Question

Welcome To Ask or Share your Answers For Others

javascript - Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:05:47+0000

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:

enter image description here

Categories

javascript - Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?

javascript - Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags