Question

我正在处理缩放图像的图像滑块。当然这适用于包括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%; }

<强> SCRIPT

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

IE7 / 8缩放背景图像100％的容器宽度

1 个答案: