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

ProgramBox

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

Post author:admin
Запись опубликована:27 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css #background-image

#javascript #HTML #css #background-image

Вопрос:

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

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

http://www.thesixtyone.com/

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

1. Примечание: Веб-сайт по ссылке вниз 2014-07.

2. Как упоминает @drudge ниже, background-image: contain — это все, что вам нужно для этого эффекта.

3. Только что осознал свою ошибку в комментарии выше… вы хотите использовать background-image: обложку . 2 известные проблемы для IOS Safari http://caniuse.com/#search=background-image

Ответ №1:

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

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

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

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

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

1. Спасибо за подробное объяснение background-size свойства.

2. Для тех, кому интересно, можно использовать страницу с этой опцией. caniuse.com/#feat=background-img-opts Имеет довольно хорошее покрытие.

Ответ №2:

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

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

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

1. и как заставить его скрываться за всеми другими элементами, которые есть на моей странице? z-значение?

2. в вашем примере увеличивается ширина изображения (изменяется соотношение сторон) при изменении размера браузера. я не хочу, чтобы соотношение сторон менялось… точно так же, как в примере, который я привел выше.

3. соотношение сторон не меняется. Это пропорциональное увеличение ширины и высоты. Если вы используете изображение с более высоким разрешением, оно будет выглядеть нормально, я просто использовал логотип Google с низким разрешением 🙂

4. хорошо, последний вопрос… почему оно заполняет не всю страницу, а только этот тонкий прямоугольный прямоугольник? как я могу это исправить, чтобы оно заполняло всю страницу?

5. именно такой высоты был div, который я создал… Я обновил пример

Ответ №3:

Вы могли бы попробовать 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()

Ответ №4:

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

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

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