Правильное масштабирование фона

#css

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

но если картинка меньше экрана, то она просто растягивается. а мне этого не нужно.
как это можно сделать средствами css?     

Ответы

Ответ 1

Попробую объяснить на пальцах. (тут можно потрогать руками рабочий пример)  

Если написать вот так: 

.demo {
    background-image: url(cat.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;        
}


Мы передадим такие пожелания браузеру:


Вставь на фон блока с классом "demo" картинку с котиком
Размести ее, по возможности, в центре этого блока
Не надо использовать свойство "замостить", если фоновая картинка меньше этого блока


Немного уточним пожелания:

.first {
    background-size: 100px 100px;
}



Хочу, чтобы фоновое изображение было 100 на 100 пикселей; масштабировать не надо;
пропорции сохранять не надо  




Попробуем иначе:  

.second {
    background-size: contain;
}



Хочу, чтобы фоновое изображение заняло максимальную область блока, при которой сохранит
свои пропорции и будет видно целиком  




И последний вариант:  

.third {
    background-size: cover;
}



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


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

Что в итоге получится (первый, второй и третий примеры один под одним):