响应的形象

Question

我试图让响应式图像为我的标题图像工作。

<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(width: 960px)">

这是我到目前为止所做的，它有点有用，但是当它大于960px时，图像会越来越大，我希望它在达到960px时停止。

<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw">

我做错了什么？

Answer 1

您可以并且应该使用CSS控制显示的宽度（即：max-width: 960;），但您也应该通过sizes属性通知浏览器显示的大小。 sizes属性的默认值为100vw：

sizes="(max-width: 960px) 100vw"转移到sizes="(max-width: 960px) 100vw, 100vw"，这基本上意味着，如果视口较低960px使用完整视口，否则使用完整视口，这没有多大意义。你想要的是以下几点：

sizes="(max-width: 960px) 100vw, 960px"

您还可以写： sizes="(min-width: 960px) 960px, 100vw"或简写：sizes="(min-width: 960px) 960px"

<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw, 960px" style="max-width:960px;">