我想实现的是根据屏幕尺寸来更改图片尺寸。我知道可以使用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
答案 0 :(得分:0)
设置img {width: 100%}
并将img
的父元素设置为max-width:{preferred width}
。当视口小于声明的宽度时,图像应自动调整为其父元素,并且父元素应缩小