Не могу найти правильное решение моей задачи. нужно относительно размера масштабировать картинку фона(т.е. что бы хотя бы раз она была в полном размере). для картинок размер которых больше экрана можно использовать background-size: 100% auto; но если картинка меньше экрана, то она просто растягивается. а мне этого не нужно. как это можно сделать средствами css?
Ответ
Попробую объяснить на пальцах. (тут можно потрогать руками рабочий пример)
Если написать вот так:
.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
Что в итоге получится (первый, второй и третий примеры один под одним):
Комментариев нет:
Отправить комментарий