<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Показувати різні зображення в залежності від ширини вікна браузера</h2>
<p>Змініть ширину вікна браузера, і зображення зміниться на 600px і 1400px.</p>
<picture>
<source srcset="../images/img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="../images/img_flowers.jpg" media="(max-width: 1400px)">
<source srcset="../images/flowers.jpg">
<img src="../images/img_flowers.jpg" alt="Квіти" style="width:auto;">
</picture>
</body>
</html>