Question

根据给定的脚本

<style>
.x{
    background: url('img.jpg') no-repeat;
    background-size: contain;
    height: 100%;
  }
</style>

<div class="x"></div>

它适用于chrome和firefox ...任何想法如何使它适用于IE 7,8,9

我尝试了很多脚本，没有像FF和Chrome那样工作得很好。

Answer 1

9之前的IE不支持background-size：

http://www.css3.info/preview/background-size/

你必须提出一种不同的技术来处理这种情况。有关解决方法的解释，请参阅此处： http://kimili.com/journal/the-flexible-scalable-background-image-redux

如果你想要一个例子（我不会声称它是一个很好的例子，但从技术上说，它有效），你可以查看我去年工作过的这个网站的代码。客户想要一个缩放到屏幕大小的背景图像，但是当幻灯片旋转时也会改变，所以它在代码方面有点吓人：

http://www.buzzhoney.com/

您需要关注http://www.buzzhoney.com/Content/style.css

中的各种设置

这个网站也应该是响应式的，所以在那里有几个级别的@media查询。那里有很多，我没有时间重复这一切，但这里有亮点：

基于这个标记shell（我删除了所有额外的东西，这些东西会影响这些主要元素如何协同工作）：

<html>
    <head>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <!-- snip header stuff -->
            </div>

            <div id="main" role="main">
                <!-- snip body stuff -->
            </div>
            <footer id="footer">
                <!-- snip footer stuff -->
            </footer>

            <div id="background">
                <div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
            </div>

            <!-- snip js includes, per best practices, 
                 located at the bottom of the page -->
        </div>
    </body>
</html>

从第316行开始，我们为背景容器及其图像设置了初始样式，但仅适用于智能手机的320px和480px之间的设备。然而，在416，我们开始设置将从321px宽和高的设备应用的样式：

#background
{
    left: 0;
    min-height: 730px;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
    height:100%;
}

#background img 
{
    left: 0;
    min-width: 1200px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
    display:block;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

注意容器（#background）如何设置为100％宽度和高度，最小高度为730px，内部图像设置为100％宽度，但没有给出特定高度，只有一小时 - 宽度为1200px。这基本上说它会向上扩展，高度将与其宽度成比例变化，但宽度永远不会低于1200px，所以在这一点上，容器将在图像周围折叠并隐藏不适合的内容它的区域（溢出：隐藏）。

另请注意，我使用position：fixed和left：0，top：0，将背景容器固定到位，并使用z-index：-1将其置于其他所有位置。< / p>

在更高分辨率下添加一些其他功能有一些小修改，但没有改变这个基本设置。为了您的目的，除非您想要淡化/更改背景，否则您将删除这些行：

    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);

因为它们会使背景图像不可见。

根据IE的窗口大小调整图像大小

1 个答案: