Question

因此，我正在使用background-size:cover来实现背景图像的预期效果，该背景图像可以扩展到应用于div的任何大小，同时保持纵横比。为什么要用这种方法？使用内联CSS将图像作为背景应用，通过PHP动态，基于相关WordPress帖子中的图像设置。

所以一切都很好，但有没有任何后备，以确保这至少在IE8中工作？可能有一些Javascript修复？

已经尝试backstretch和supersized，但无济于事，因为它们仅将图片应用于页面背景。

您可以在行动over here中看到它。

Answer 1

在IE8或更低版本中，作为具有定义宽度/高度的div的子项插入的前景图像将是唯一的解决方法：

<!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>

如果不相同，请向Stu Nicholls寻求进一步的帮助。

演示：

enter image description here

Answer 2

我之前尝试过这个答案，并没有像背景那样工作：封面;事实上，它确实使图像符合所选择的尺寸，但它并没有将多余部分限制在新措施中，而这正是我所期望的“覆盖”选项。我的解决方案在这里找到：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>

Answer 3

如果您需要缩小图像的大小，而不是增长它，这种方法不起作用。我发现避免使用Javascript的最佳方法是将两个图像叠加在一起，悬停时使顶部透明。涉及调整原件大小的所有其他方法（例如，background-size）似乎在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>

.social-btn-container:hover > .top-btn部分在IE怪癖模式下工作，似乎不支持opacity，如果使用:hover{visibility:hidden} hover在隐藏可见性时变为false，从而导致闪烁。（外部div也定位图像。）我已经在FF23，IE标准和怪癖（让IE 10模拟7,8和9），Opera和Safari中进行了测试。

Answer 4

在IE8或以下版本中，使用mongod代码分隔：

-webkit示例：

background:

- 在IE中尝试：

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

此处有更多详情：{{3}}

在DIV上实现跨浏览器兼容性的“背景大小：覆盖”后备/垫片/技巧？

4 个答案: