javascript - IE7/8 将背景图像缩放为其容器宽度的 100%

Question

我正在研究缩放图像的图像 slider 。当然，这在包括 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/

Answer 1

检查...

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

HTML

<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)”作为您的容器。