Масштабирование фонового изображения при сохранении соотношения сторон - PullRequest
Новая
       1

Масштабирование фонового изображения при сохранении соотношения сторон

23 голосов
/ 06 апреля 2011

Мне бы хотелось, чтобы изображения для моего фона менялись автоматически, как слайд-шоу. Но я бы хотел, чтобы изображения заполняли фон независимо от размера окна браузера ... и если оно уменьшено, соотношение сторон изображения не изменится.

Вот пример того, что я пытаюсь сделать:

http://www.thesixtyone.com/

Как я могу выполнить эти задачи? Любая помощь будет высоко ценится.

Ответы [ 4 ]

85 голосов
/ 06 апреля 2011

В CSS3 вы бы использовали background-size свойство.

background-size: contain; Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до максимального размера, чтобы его ширина и высота могли поместиться в области расположения фона.

Contain всегда вмещает все изображение в вашем окне просмотра, оставляя непрозрачные границы либо сверху вниз, либо слева направо, если соотношение фонового изображения и окна браузера не совпадает.

background-size: cover; Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования фона.

Cover всегда заполняет окно браузера, отсекая при этом некоторые волосы или уши, что я лично и предпочитаю в большинстве случаев. Вы можете управлять выравниванием изображения в окне просмотра, используя свойство background-position.

13 голосов
/ 06 апреля 2011

Вы не можете, по крайней мере, не так, как пытаетесь сейчас.

Однако вы можете создать вместо него <img>, а с помощью css установить position:absolute масштабировать его до100% ширины и обрезать его от родителя с помощью overflow:hidden

пример: http://jsfiddle.net/GHmz7/4/

2 голосов
/ 06 апреля 2011

Вы можете попробовать jquery / js, чтобы изменить фоновое изображение: 

<!doctype html>
<html>
    <head>
        <title>Width resolution</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {
                font-size: 20px;
                font-family: arial,helvetica,sans-serif;
                font-weight: 700;
                color:#eee;
                text-shadow: 0px 0px 1px #999;
}
            div {
                width:auto;
                height:340px;
                border:#ccc groove 2px;
                padding:5px;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('body').css({'background-color':'#ccc'});

                var sw = screen.width;

            function wres() {
                switch(sw) {
                    case 1920:
                        $('div').css({'background':'#192000 url(bg-1920.jpg)'});
                        $('body').css({'background':'#001920 url(bg-1920.jpg)'});
                        break;
                    case 1600:
                        $('div').css({'background':'#160000 url(bg-1600.jpg)'});
                        $('body').css({'background':'#001600 url(bg-1600.jpg)'});
                        break;
                    case 1280:
                        $('div').css({'background':'#128000 url(bg-1280.jpg)'});
                        $('body').css({'background':'#001280 url(bg-1280.jpg)'});
                        break;
                    case 1152:
                        $('div').css({'background':'#115200 url(bg-1152.jpg)'});
                        $('body').css({'background':'#001152 url(bg-1152.jpg)'});
                        break;
                    default:
                        $('div').css({'background':'#102400 url(bg-1024.jpg)'});
                        $('body').css({'background':'#001024 url(bg-1024.jpg)'});
                }
                    //alert(rsw);
                    //$('div').html(rsw);
                    $('.res').append(' '+sw);
                    $('div.res').css('width', 1920);
                }
                //alert(sw);
                wres();
            });
        </script>
    </head>
    <body>
        <h1 class="res">Resolução atual:</h1>
        <div class="res">The div</div>
    </body>
</html>

Вместо этого вы можете создать классы CSS для фона и использовать .toggleClass ()

0 голосов
/ 06 апреля 2011

Вы не можете надежно изменять размер фоновых изображений во всех браузерах / версиях и т. Д. *

Эффект, который вы видите на сайте thesixtyone.com, достигается путем растягивания обычного встроенного изображения до 100% его контейнера, который являетсяразделение.Другие элементы затем перемещаются поверх этого «фонового» деления.

Таким образом, ответ заключается не в том, чтобы использовать фоновое изображение, а в том, чтобы изображение заполнило экран в заполнителе, а затем поместите другие элементы поверхэтого.

...