| Kosten | Суббота, 30 Ноября 2019, 23:41 | Сообщение 1 |
| Не секрет, что даже поисковые системы стали учитывать адаптивность на сайте, это его дизайн, но и фоновое изображение стало не исключением.Адаптивные изображения автоматически настраиваются для отображения изображений на основе устройства пользователя. Они используются, чтобы соответствовать размеру экрана.
Установка ширины изображения
Самый простой способ сделать изображение работоспособного определения ширины для IMG элемента. Установка ширины заставляет изображение адаптироваться к его контейнеру. Если он находится внутри статьи, он будет занимать 100% ширины статьи.
Если вы хотите адаптивное изображение, но с ограничением, используйте свойство max-width CSS. Он будет указывать ширину изображения в пикселях, максимум 100% ширины его контейнера. Это означает, что ширина вашего изображения составляет 300 пикселей.
- Если контейнер 200px: изображение будет 300px (max-width: 100%)
- Если контейнер 300px: изображение будет 300px (max-width: 100%)
- Если контейнер 1400px: изображение останется 300px;
Есть фиксированные пункты, то есть фиксированное меню навигации, для которого нам нужно будет задать конкретную высоту . Большую часть времени высота и ширина находятся в симметрии. Если ширина изображения будет уменьшена для адаптации к отзывчивому, высота тоже будет. Если ширина фиксирована, высота тоже будет.
Есть 3 способа сделать изображения адаптивными:
1. Когда свойство background-size установлено как содержащее, фоновое изображение будет масштабироваться и пытаться соответствовать области содержимого. Однако изображение сохранит пропорциональную зависимость между шириной и высотой изображения:
Пример
Код <!DOCTYPE html> <html> <head> <title>Наименование документаt</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div.img-block { width: 100%; height: 450px; background-image: url("http://zornet.ru/_fr/56/8891161.jpg"); background-repeat: no-repeat; background-size: contain; border: 1px solid #1b1a1a; } h1 { padding: 0 10px; color: #ececec; } </style> </head> <body> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <div class="img-block"> <h1>Ваше фоновое изображение</h1> </div> </body> </html>
Установка завершена!
Демонстрация
2. Если для свойства background-size установлено значение 100% 100%, где фоновое изображение будет растягиваться, чтобы охватить всю область содержимого:
Пример №2
Код <!DOCTYPE html> <html> <head> <title>Наименование документа</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div.img-block { width: 100%; height: 450px; background-image: url("http://zornet.ru/_fr/56/1420480.jpg"); background-size: 100% 100%; border: 1px solid #1d1b1b; } h2 { padding: 0 10px; color: #ececec; } </style> </head> <body> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <div class="img-block"> <h2> Ваше фоновое изображение </div> </body> </html>
Установка закончена!
Демонстрация
3. Когда свойство background-size установлено на cover , фоновое изображение будет масштабироваться, чтобы охватить всю область содержимого. Обратите внимание, что некоторая часть фонового изображения может быть обрезана:
Код <!DOCTYPE html> <html> <head> <title>Наименование документа</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> div.img-block { width: 100%; height: 450px; background-image: url("http://zornet.ru/_fr/56/5679005.jpg"); background-size: cover; border: 1px solid red; } h2 { padding: 0 10px; color: #fff; } </style> </head> <body> <p>Измените размер окна браузера, чтобы увидеть эффект.</p> <div class="img-block"> <h2>Ваше фоновое изображение</h2> </div> </body> </html>
На этом все, все 3 варианта актуальны.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Суббота, 30 Ноября 2019, 23:47 | Сообщение 2 |
|
| Если вы хотите установить несколько изображений, вам понадобится атрибут srcset . Srcset определяет набор изображений, которые будут иметь в браузере, чтобы выбрать между ними.
Для правильной работы мы рекомендуем использовать атрибут srcset с элементом picture, а не с img.
Пример адаптивного изображения с максимальной шириной и высотой
See the Pen
Адаптивные фоны сайта by Kocsten (@kocsten)
on CodePen.
Также, если интересно будет, то здесь подобран материал по схожей тематике, где устанавливаем адаптивный фон виде изображение или видео.
Адаптивное фоновое изображение с помощью CSS
Адаптивное фоновое изображение с помощью CSS
Создать адаптивный видео фон для блока на CSS
Адаптивный фон с изображением для сайта
Создать адаптивное фоновое изображение в CSS
Видео в качестве фона для сайта на CSS
Страница с анимированным фоном для сайта
| | Страна: (RU) |
| |
