Как сделать адаптивные изображения?

#javascript #html #css #css3

Подскажите вариант, как сделать адаптивные изображения?

Что хочется:


Под каждый breakpoint грузится свое изображение
Учитывается изображение для retina дисплеев
Изображения масштабируются

    

Ответы

Ответ 1

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


  
  
  






Допустим, вы хотите, чтобы на экранах до 400 пикселей было одно изображение, а на
экранах больше другое. Делаем так:



  
  
  




Также вы хотите, чтобы принималась в учет плотность пикселей. Тогда необходимо в
атрибуте srcset указывать несколько путей изображений, через пробел писать 1x, 2x и,
если необходимо, то и 3x. x позволяет обратиться к device-pixel-ratio.



  
  
  




Также вы хотите для разных брейкпоинтов разный размер изображения, тут придет на
выручку атрибут sizes. У нас будет реализовываться следующий сценарий: 1) для экранов
меньше 800 пикселей будет изображение ordinary.jpg, 1.1) для экранов 400 и меньше пикселей
изображение будет иметь ширину 100vw, в остальных случаях оно будет занимать 70vw;
2) для экранов больше 800 пикселей ordinary2.jpg, 2.2) для экранов больше 1400 пикселей
у него будет ширина 40vw, в остальных случаях 50vw.



  
  
  



Ответ 2

Можно воспользоваться атрибутом srcset (HTML5)

Атрибут может использоваться вместо src и позволяет задавать различные URL изображений.
Значением атрибута является одна или несколько строк, разделенных запятой. В состав
каждой строки входят:


URL файла с изображением
optionally, whitespace followed by one of:  

-- значение ширины viewport (им должно быть положительное целое число, за которым
следует символ «w»). The width descriptor is divided by the source size given in the
sizes attribute to calculate the effective pixel density.
  --
значение плотности пикселей (положительное число, за которым следует символ «x»),
по умолчанию равно 1x.


Можно через медиазапрос + :after + background-image.