Отзывчивые изображения для веб

Недавно я узнал кое-что новое об отзывчивых изображениях и хочу поделиться этим здесь.

Как мы все знаем, мы можем создавать отзывчивые изображения с помощью CSS и медиа-запросов, но элемент <picture> позволяет нам показывать несколько изображений в зависимости от области просмотра браузера.

С помощью CSS

Сначала давайте посмотрим пример отзывчивого изображения с помощью CSS

  <img
    src="./src/desktop-img.png"
    alt="desktop"
    class="responsive"
    width="100%"
  />
Вход в полноэкранный режим Выйти из полноэкранного режима

и задайте ему свойства css

  .responsive {
     height: auto;
  }
Вход в полноэкранный режим Выход из полноэкранного режима

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

С помощью элемента Picture

Элемент <picture> дает нам возможность использовать различные изображения для разных экранов.
Элемент <picture> содержит два тега: один или несколько тегов <source> и один тег <img>.
Тег <source> содержит свойства media и srcset. Браузер будет проверять запрос media, который соответствует текущей ширине области просмотра, и отображать изображение, указанное в свойстве srcset.
Рассмотрим пример

<picture>
  <source media="(min-width:650px)" srcset="./src/desktop-img.png" />
  <source media="(min-width:465px)" srcset="./src/mobile-img.png" />
  <img src="./src/mobile-img.png" alt="desktop" style="width: 100%;" />
</picture>
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь я показываю desktop-img для видовых экранов с шириной больше и равной 650px и mobile-img для видовых экранов с шириной больше и равной 465px.
Также я указал изображение по умолчанию в теге <img>. Это изображение будет показано, если ни одно из условий медиа-запроса не будет выполнено.

Подробнее о теге <picture> вы можете прочитать здесь.

Спасибо, что прочитали!
Не стесняйтесь общаться в Twitter

Оцените статью
devanswers.ru
Добавить комментарий