Адаптивное изображение — это изображение, которое может адаптироваться к различным устройствам, независимо от размеров экрана. Наличие адаптивного изображения на веб-сайте в наши дни стало очень важным. Поскольку он не только ускоряет работу веб-сайта, но и предлагает удобный пользовательский интерфейс на всех устройствах. Размер адаптивных изображений также будет изменен при изменении размера браузера.
Адаптивные изображения эффективно адаптируются к экранам разных размеров на разных устройствах. Это гарантирует сохранение качества. Адаптивный веб-сайт с адаптивными изображениями, несомненно, повышает уровень вовлеченности и конверсии. Изображения можно сделать адаптивными с помощью CSS и медиа-запросов.
В этой статье будут использоваться HTML и CSS, чтобы сделать изображения адаптивными.
Как сделать изображения адаптивными с помощью HTML и CSS?
Чтобы сделать изображения адаптивными с помощью HTML и CSS, выполните следующие действия:
Способ 1: используйте свойство «max-width».
Первый способ сделать изображение адаптивным — использовать параметр « Максимальная ширина ' свойство. « Максимальная ширина Свойство «используется для определения максимальной ширины изображения. Если содержимое превышает максимальную ширину, высота элемента изменится.
Создать HTML
Чтобы добавить файл изображения в тег
HTML, пользователям необходимо использовать тегДобавить CSS
Теперь создайте внешний файл CSS, сохраните его с расширением «. CSS ” и свяжите его внутри тега
HTML-файла. Чтобы стилизовать файл изображения в файле CSS, начните с тега img и откройте фигурные скобки. Затем внутри фигурной скобки добавьте « максимальная ширина: 100% ;” чтобы разместить изображение по горизонтали внутри контейнера. Более того, это предотвратит обрезку изображений. После этого добавьте « высота: авто ;” для автоматической регулировки высоты, чтобы изображение отображалось правильно:изображение {
Максимальная ширина : 100% ;
высота : авто ;
}
Измените размер окна браузера, чтобы проверить масштабирование изображения.
Способ 2: используйте свойство «width»
Другой способ сделать изображение адаптивным — использовать свойство « ширина ». Недвижимость ' ширина » определяет ширину изображений и текста. Он не содержит полей, отступов или границ. Он может устанавливать размер изображений и текста в форме см, пикселей или %. Чтобы сделать изображение адаптивным, просто назначьте параметр « ширина «собственность» 100 %». Параметр ' ширина: 100% ;” означает, что изображение должно быть таким же большим, как родительский элемент:
изображение {ширина : 100% ;
высота : авто ; }
Вышеупомянутое подтверждает, что изображение отзывчиво. Чтобы проверить, отзывчив он или нет, просто измените размер окна браузера.
Способ 3: применить медиа-запросы
Медиа-запросы CSS помогают пользователям изменять внешний вид веб-страницы. Медиа-запрос CSS содержит условия, при выполнении которых эти условия изменят внешний вид устройства или браузера. Медиа-запросы также могут помочь пользователям сделать изображения адаптивными. По этой причине сначала укажите «@ СМИ », а затем укажите тег « Максимальная ширина » и назначьте максимальную ширину изображения в фигурных скобках. Всякий раз, когда это условие будет выполнено, изображение станет отзывчивым. После этого в фигурных скобках укажите тег img и укажите « ширина: 100% ;” ценить:
@СМИ ( Максимальная ширина : 480 пикселей ) {изображение {
ширина : 100% ;
}
}
Примечание : изображение будет адаптивным только в том случае, если оно соответствует указанному условию.
Медиа-запрос CSS был применен, и теперь изображение будет вести себя как отзывчивое, если его размер будет изменен до указанного размера изображения. В противном случае он не будет реагировать:
Заключение
Чтобы сделать изображения адаптивными с помощью HTML и CSS, у пользователей есть различные методы. Эти методы включают в себя создание адаптивных изображений с помощью « Максимальная ширина ' свойство, ' ширина », а также применив медиа-запрос CSS. В этой статье пользователям представлено комплексное решение, позволяющее сделать изображения адаптивными.