良好的“背景尺寸：覆盖” fallbacks / shims /技巧的跨浏览器兼容性DIVs？ [英] Good "background-size: cover" fallbacks/shims/tricks for cross-browser compatibility on DIVs?
问题描述
因此，我使用 background-size：cover 来实现背景图像的所需效果，该效果可以缩放为适用于任何尺寸的div，同时保持方面比。为什么要使用这种方法？使用内联CSS，通过PHP动态地应用图像作为背景，基于在相关的WordPress帖子中设置为图像。
所有一切都很好，但是有没有任何回退，以确保这将工作在至少IE8？
已尝试 backstretch a>和超大尺寸，但无效，因为它们仅将图像应用于页面的背景。 p>
您可以在在这里查看它。
在IE8或更低版本中，作为div的子元素插入的前景图像是唯一的解决方法：
<！doctype html>
< html lang =en>
< head>
< title>动态图片大小调整< / title>
< style type =text / css>
html，body {margin：0; padding：0; width：100％;高度：100％; overflow：hidden; text-align：left; }
#pseudobg {position：absolute; z-index：1; width：100％;高度：100％; }
#scroller {position：absolute; width：100％;高度：100％; top：0; left：0; overflow：auto; z-index：2; }
#dyndiv {position：absolute;左：50％; width：200px; height：300px; }
< / style>
< / head>
< body>
< div id =scroller>
<！ - 在此处插入您的内容 - >
< div id =dyndiv>
< img id =pseudobgsrc =http://www.stackoverflow.com/favicon.icoalt =title =/>
< / div>
< / div>
< / body>
< / html>
如果不等同，请询问 Stu Nicholls 获取更多帮助。
演示：
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:
这篇关于良好的“背景尺寸：覆盖” fallbacks / shims /技巧的跨浏览器兼容性DIVs？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
