Адаптивные изображения или отзывчивые изображения — это комбинация методов загрузки правильных изображений в зависимости от размера экрана или устройства. Адаптивные изображения автоматически настраиваются в соответствии с различными размерами экрана и устройствами. Адаптивные изображения требуют создания отдельного макета для каждого устройства, на котором будет осуществляться доступ к веб-странице. Адаптивные изображения можно легко создавать с помощью CSS Flexbox. Flexbox — это одномерная модель макета CSS, которая создает либо строки, либо столбцы. Flexbox упрощает создание адаптивной структуры.
В этом посте будут представлены рекомендации по созданию адаптивных изображений с помощью CSS Flexbox.
Как создавать адаптивные изображения с помощью CSS Flexbox?
Чтобы создать адаптивные изображения с использованием CSS Flexbox, пользователям сначала необходимо создать структуру HTML, а затем применить CSS. Для практической демонстрации выполните процедуры, представленные ниже.
Создать HTML-структуру
Создать <дел> и установите его « сорт «имя для» контейнер изображений ». Затем добавьте два изображения в
< div сорт '=' 'контейнер изображений' >
< изображение источник '=' 'изображение-1.jpg' все '=' «Первое изображение» >
< изображение источник '=' 'изображение-2.jpg' все '=' «Второй образ» >
div >
Применить CSS
Сначала создайте Flexbox, установив параметр « отображать ” стоимость недвижимости до “ гибкий ' внутри ' контейнер изображений » <дел> . После этого разрешите изображениям переноситься на следующую строку, когда это необходимо, установив параметр « гибкая упаковка ” стоимость недвижимости до “ сворачивать ».
Затем примените CSS к изображениям, указав параметр « изображение ' вместе с ' .images-контейнер ' имя. Сначала установите « гибкий ” стоимость недвижимости до “ 1 », чтобы равномерно распределить доступное свободное пространство между изображениями. Затем установите « Максимальная ширина ” стоимость недвижимости до “ 100% », чтобы изображения не превышали исходную ширину. Установить ' высота ” стоимость недвижимости до “ авто », чтобы сохранить соотношение сторон. Наконец, добавьте расстояние между изображениями, установив параметр « допуск ” стоимость недвижимости до “ 10 пикселей »:
.images-контейнер {отображать: гибкий ;
flex-wrap: обертка;
}
.images-контейнер img {
гибкий: 1 ;
Максимальная ширина: 100 % ;
высота: авто;
поле: 10 пикселей;
}
Перед обертыванием
Адаптивные изображения с использованием CSS Flexbox успешно созданы. Представление вывода ниже показано до переноса окна браузера:
После обертывания
Теперь давайте обернём окно браузера, чтобы проверить, является ли изображение адаптивным:
Изображение выше подтверждает, что добавленные изображения являются адаптивными.
Заключение
Чтобы создать адаптивные изображения с помощью CSS Flexbox, пользователю сначала необходимо создать структуру HTML, а затем определить <дел> и поместите в него изображения с помощью тега <изображение> ярлык. Затем примените CSS и внутри CSS установите для свойства display значение « гибкий », чтобы создать Flexbox. В этой статье продемонстрировано подробное руководство по созданию адаптивных изображений с помощью CSS Flexbox.