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

Итан Маркотт основоположник термина «адаптивный веб-дизайн». В своих работах он заявил, что адаптивные изображения являются одним из компонентов адаптивного веб-дизайна.

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

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

Это плохая новость для пользователей с ограниченным трафиком. Также это делает ваш сайт более «медленным» с небольшой скоростью интернет соединения.

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

Адаптивное изображение Bootstrap 3

При разработке сайта с использованием boostrap 3 картинки в верстке мы можем сделать адаптивными добавив им css класс .img-responsive. Этот класс добавляет следующие плавила max-width: 100%;height: auto; и display: block;. Ширина будет все время равна ширине родительского блока, а высота автоматической чтобы сохранить пропорции изображения.

<img src="..." class="img-responsive" alt="Responsive image">

Адаптивное изображение в html

Это возможно будущий стандарт адаптивных изображений. Новый элемент <picture> позволяет устанавливать несколько источников изображений, а также breakpoint, с помощью которых определяется необходимая версия изображения:

<picture id="images">
  <source srcset="large-1.jpg 1x, large-2.jpg 2x" media="(min-width: 45em)" />
  <source srcset="med-1.jpg 1x, med-2.jpg 2x" media="(min-width: 18em)" />
</picture>

Заключение

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

Если же вам не нравятся предложенные выше предложения, тогда можно дождаться официального релиза свойств элементов <picture>.

 

Добавить комментарий

Ваш адрес email не будет опубликован.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>