Сделать изображение адаптивным: простой способ на HTML/CSS

Быстрый ответ

Для того чтобы изображения корректно вписывались в разные размеры экранов, используйте свойства max-width: 100% и height: auto в CSS. Это позволяет масштабировать изображения, сохраняя их пропорции.

img {
  max-width: 100%; /* Подстраиваюсь под размер любого контейнера */
  height: auto; /* Мои пропорции не меняются при изменении размера */
}

Не забывайте присваивать атрибут alt изображениям для улучшения их доступности. Это необходимо для программ чтения с экрана, передающих описание изображения.

Адаптивность в ваших руках

Гибкость макетов

Текучий дизайн предусматривает гибкую адаптацию изображений и других элементов сайта к различным устройствам. Гибкий контейнер облегчает процесс подгонки изображений под разные размеры экранов, что делает интерфейс действительно отзывчивым.

Подробнее об этом расскажет наш спикер на видео

Медиа-запросы для тонкой настройки

Медиа-запросы @media в CSS позволяют дополнительно настроить отображение изображений и макетов для конкретных размеров окон просмотра, улучшая впечатление пользователя на устройствах с разной разрешающей способностью.

От использования <center> к центрированию с помощью CSS

Применение тега <center> сегодня противопоказано. Для центрирования изображений рекомендуется использовать методы CSS, в частности, margin: auto; для блоковых элементов, в соответствии с современными стандартами верстки.

Визуализация

Процесс создания адаптивных изображений можно визуализировать как подгонку изображения под различные рамки:

Начальная фаза: 
🖼️📏🖼️📏🖼️
[🌄🖼️👀]   (Изображение фиксированного размера)

Адаптация:
🖼️🔧     🖼️🔄     🖼️✅
(Настройка) (Исправление) (Идеальное внедрение)

После:
🖼️📏🖼️📏🖼️
[🌄]🖼️👀      [🌄]🖼️👀      [🌄]🖼️👀
(Малая рамка)   (Средняя)   (Большая)

Теперь изображение (🌄) идеально вписывается в любую рамку (🖼️)!

Продвинутые советы для адаптивности изображений

Обращаемся к Bootstrap за решением

Фреймворк Bootstrap предлагает удобный класс img-fluid, который решает задачи адаптации изображений. Этот класс объединяет свойства max-width: 100%, height: auto и display: block, оптимально решая вопросы адаптивности.

<img src="image.jpg" class="img-fluid" alt="Адаптивное изображение">

Семантика при использовании тегов <p> и <div>

Размещая изображения в тегах <div>, вы получаете больший контроль над стилизацией и минимизируете возможные проблемы с отступами. Также можно использовать тег <p> для текста и изображений, тем самым создавая семантическую структуру документа.

Постоянство отображения на разных устройствах

Стоит проверять изображения на разнообразных разрешениях экранов и реальных устройствах, обеспечивая их идентичное отображение везде. Не забывайте проводить тесты на доступность, включая проверку с использованием специализированных устройств для чтения с экрана.

Полезные материалы

1. Учим веб-разработку | MDN – Адаптивные изображения — детальное руководство по интеграции адаптивных изображений.

2. Как сделать изображения адаптивными – В3Schools —лашмануализация процесса создания адаптивных изображений с помощью CSS.

3. Изображения · Bootstrap — использование Bootstrap для создания адаптивных изображений.

4. Правильный способ адаптивных изображений: Руководство по <picture> и srcset — Smashing Magazine — глубокое изучение особенностей работы с адаптивными изображениями.

5. Предоставление адаптивных изображений | Статьи | web.dev — лучшие методы для эффективного предоставления изображений на веб-сайтах.

6. Адаптивные изображения: вызовы и решения – A List Apart — анализ проблем и подходов к решению вопросов, связанных с адаптивными изображениями.