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

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

IE 9之前的版本不支持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查询。 里面有很多东西，我没有时间重复全部，但是这里是重点：

基于标记的外壳（我删除了所有这些主要元素如何协同工作的方式）：

<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行开始，我们为智能手机设置了背景容器及其图像的初始样式，但仅针对宽度在320像素至480像素之间的设备。 但是，在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将其放置在其他所有对象的后面。

进行了一些较小的修改，以添加更高的分辨率的其他功能，但是没有什么改变此基本设置。 为了您的目的，除非您想要褪色/改变背景，否则请删除以下几行：

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

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

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

问题描述

1 个解决方案

解决方案1
0 2012-10-15 14:08:38

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

问题描述

1 个解决方案

解决方案1 0 2012-10-15 14:08:38

解决方案1
0 2012-10-15 14:08:38