响应图像尺寸

Question

我想实现的是根据屏幕尺寸来更改图片尺寸。我知道可以使用CSS中的@media查询来完成，但是我想在“ 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>

tnx

Answer 1

设置img {width: 100%}并将img的父元素设置为max-width:{preferred width}。当视口小于声明的宽度时，图像应自动调整为其父元素，并且父元素应缩小