IE7/8 Масштабирование фонового изображения на 100% ширины его контейнера

Я работаю над слайдером изображения, который масштабирует изображение. Конечно, это прекрасно работает во всех браузерах, включая 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/


javascript jquery css internet-explorer
person Robert E. McIntosh    schedule 22.04.2013    source источник
comment
width: 100%; height: auto; обычно делает это за меня.   -  person Blazemonger    schedule 22.04.2013
comment
Проблема в том, что когда я добавляю height:auto;, изображение не появляется   -  person Robert E. McIntosh    schedule 22.04.2013
comment
Что такое неоплачиваемый профессионал?   -  person Blazemonger    schedule 22.04.2013
comment
Предполагая, что вы используете background-size для других браузеров, вы можете использовать полифил, например CSS3Pie, который добавляет поддержку CSS background-size. к более старым версиям IE.   -  person Spudley    schedule 22.04.2013
comment
CSS3Pie поддерживает размер фона! Это удивительно. Надо пойти проверить.   -  person Robert E. McIntosh    schedule 22.04.2013
comment
@Blazemonger Я думаю, они имеют в виду обученных добровольцев   -  person Robert E. McIntosh    schedule 22.04.2013
comment
Также существует этот полифилл, специфичный для background-size.   -  person Blazemonger    schedule 22.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Проверь это...

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)", чтобы он был вашим контейнером.

person Plummer    schedule 22.04.2013