6

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

所以一切都很好，但是否有任何后备措施来确保这至少在 IE8 中有效？可能有一些 Javascript 修复？

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

你可以在这里看到它的作用。

4

4 回答 4

7

在 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寻求进一步的帮助。

演示：

在此处输入图像描述

于 2012-03-13T22:20:44.710 回答
1

如果您需要缩小图像的大小，而不是扩大它，这种方法是行不通的。我发现避免使用 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 中对此进行了测试。

于 2013-09-16T20:51:57.290 回答
1

我之前尝试过答案，但它不能作为 background-size: cover; 可以预期，它实际上确实使图像适合所选尺寸，但它没有将多余的部分剪裁到新的措施中，这是我对“覆盖”选项的期望。我的解决方案在这里找到：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>
于 2013-05-08T13:12:20.387 回答
0

在 IE8 或以下使用分隔background:代码：

-webkit 示例：

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

- 在 IE 中尝试：

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

更多详细信息：https ://msdn.microsoft.com/en-us/library/jj127316(v=vs.85).aspx

于 2017-01-10T13:14:58.830 回答