将背景图像缩放为其容器宽度的100%

IE7/8 Scale background image 100% of the width of its container

本文关键字：100% 背景 图像 缩放      更新时间：2023-09-26

我正在制作一个缩放图像的图像滑块。当然，这在包括IE9+在内的所有浏览器中都可以正常工作，但对于IE7/8，它似乎缩放图像以适合容器的高度而不是宽度…

我使用下面的CSS代码来缩放图像。

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../files/slideshow/3.jpg', sizingMethod='scale')"
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../files/slideshow/3.jpg', sizingMethod='scale');

我很好奇，如果有人知道一种方法，使这种比例的容器的宽度，而不是使用CSS或JavaScript的高度?

可以在这里查看http://kearsargefire.org/

Check it…

http://css-tricks.com/perfect-full-page-background-image/

<img src="images/bg.jpg" id="bg" alt="">
CSS

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
脚本

$(window).load(function() {    
        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();
        function resizeBg() {
                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }
        }
        theWindow.resize(resizeBg).trigger("resize");
});

将$(window)改为你的容器

相关文章：