CSS: Адаптивные изображения img srcset

Используем параметр source для автоматического изменения изображения на экранах разной ширины.

Поддержка браузерами: https://caniuse.com/#search=picture%20source

 

# 1 вариант
<img
    srcSet="sample-480w.webp 480w, sample-640w.webp 720w, sample-900w.webp 960w"
    sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
    src="sample-900w.webp"
>


# 2 вариант
<picture>				
	// изрбражение для экрана <= 570px (размер изображения + поля и отступы)
	<source media="(max-width: 570px)" srcset="sample-320w.webp">

	// изрбражение для экрана <= 820px (размер изображения + поля и отступы)
	<source media="(max-width: 820px)" srcset="sample-480w.webp">

	// изображение по-умолчанию для большого экрана
	<img src="sample-800w.webp" alt="" />
</picture>


CSS up: просмотров: 676