масштабирование фона и минимальный размер - PullRequest
Новая
       22

масштабирование фона и минимальный размер

7 голосов
/ 15 июня 2010

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

Ответы [ 6 ]

23 голосов
/ 29 декабря 2013 
background-size: cover;

вот и все

5 голосов
/ 22 августа 2012

другой возможностью было бы использование медиа-запросов.установите размер изображения на ..1280x450, а затем используйте медиазапрос background-size: 100% auto; для всех размеров окна более 1280 пикселей в ширину.

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

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale');
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/beach_2.png',sizingMethod='scale')" ;

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

5 голосов
/ 30 мая 2011

Следующая комбинация CSS + Javascript + JQuery сработала для меня.

Спасибо ANeves за ответ, который был полезен.

CSS: 

body
{
    background: url(background.jpg) center center fixed;
    background-size: 100% auto;
}

Javascript (JQuery): 

jQuery (function ($)
{   // ready
    $(window).resize (function (event)
    {
        var minwidth = 1200;
        var minheight = 1024;

        var bodye = $('body');

        var bodywidth = bodye.width ();

        if (bodywidth < minwidth)
        {   // maintain minimum size
            bodye
                .css ('backgroundSize', minwidth + 'px' + ' ' + minheight + 'px')
            ;
        }
        else
        {   // expand
            bodye
                .css ('backgroundSize', '100% auto')
            ;
        }
    });
});
1 голос
/ 12 марта 2014

Поместите изображение в div и укажите его размер.Применить следующее свойство к тегу img 

background-repeat: no-repeat;
background-size: 100% 100%;
1 голос
/ 18 марта 2013

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

0 голосов
/ 15 июня 2010

Вы, похоже, ищете свойство CSS3 background-size . Вы можете ограничить минимальный размер контейнера, если вы знаете, что изображения имеют размер 1200x1200.

Я не верю, что он будет работать в IE, хотя, возможно, это не вариант для вас. В этом случае я предлагаю вам взглянуть на http://www.markschenk.com/cssexp/background/scaledbgimage.html

...