Адаптивный размер изображения

Question

что я хотел бы добиться, это изменить размер изображения в зависимости от размера экрана.Я знаю, что это можно сделать с помощью запроса @media в css, но я бы хотел добиться этого в атрибуте "img".

Я пытался так, но в моем случае это не работает.

 <picture>
  <source srcset="{{'payments_pink.png' |  file_img_url:'60px'}}" media="(min-width: 1200px)"/>
  <source srcset="{{'payments_pink.png' |  file_img_url:'40px'}}" media="(max-width: 800px)"/>
  <source srcset="{{'payments_pink.png' |  file_img_url:'10px'}}" media="(min-width: 600px)"/>
  <img src="{{'payments_pink.png' |  file_img_url:'40'}}" alt="example"/>
</picture>

тн

Answer 1

Установите img {width: 100%} и установите родительский элемент img в max-width:{preferred width}.Изображение должно автоматически адаптироваться к его родительскому элементу, а родительский элемент должен сжиматься, когда область просмотра меньше заявленной ширины