В предыдущей статье про адаптивные изображения я обещал рассказать про адаптивное фоновое изображение. И так приступим. Для того, чтобы наше фоновое изображение хорошо смотрелось на всех типах устройств компьютерах, ноутбуках, планшетах ну и конечно на смартфонах мы будем использовать медиа запросы. Для начала создадим контейнер с именем id = "fon_img" к которому и будет, присваивается картинка.
<!DOCTYPE html> <html lang="en"> <head>
</head> <body>
Адаптивное фоновое изображение на CSS
Это изображение всегда будет иметь 100% ширину так как его контейнер не имеет значения максимальной ширины (max-width)
</body> </html>
Затем в стилях мы присваиваем к нашему контейнеру #fon_img наше фоновое изображение с заданной высотой, а так же выставим background-size: cover;, чтобы картинка растягивалась на всю ширину экрана.
Не забываем задавать префиксы для других браузеров -webkit-background-size: cover; -moz-background-size: cover;, -o-background-size: cover; , чтобы наше изображение корректно отображалось. После всего этого добавляем наши медиа запросы, с помощью которых мы будем изменять высоту фоновой картинки для разных устройств.
@media(max-width:1016px){
#fon_img{
height:600px;
}
}
@media(max-width:768px){
#fon_img{
height:400px;
}
}
@media(max-width:480px){
#fon_img{
height:250px;
}
}
Теперь высота изображения будет всегда подстраивается под используемое устройство. С помощью таких медиа запросов можно изменить шрифт для заголовка или цвет шрифта, ну и все что вам пожелается.
<!DOCTYPE html> <html lang="en"> <head>
</head> <body>
Адаптивное фоновое изображение на CSS
Это изображение всегда будет иметь 100% ширину, так как его контейнер не имеет значения максимальной ширины (max-width)
</body> </html>
Мы рассмотрели все варианты использования адаптивных изображений, которые можно использовать при адаптивной верстке. Конечно, еще много тонкостей осталось не рассказанными, но со временем, во время работы, вы их сами поймете, а это все лишь базовые основы, с помощью которых уже можно создать абсолютно адаптивный сайт.
CSS