Масштабирование Фонового Изображения При Сохранении Соотношения Сторон

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

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

http://www.thesixtyone.com/

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

22
background-image css html javascript

4 ответов

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

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

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

12

С CSS3 вы бы использовали background-size собственность.

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

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

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

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

85

вы можете попробовать 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()

2

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

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

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

0