html - 响应式图像

Question

我正在尝试让响应式图像适用于我的标题图像。

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

这是我到目前为止所拥有的，它有点工作，但是当它大于 960 像素时，图像会继续变大，我希望它在达到 960 像素时停止。

<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;通知浏览器显示的大小。sizessize 属性的默认值为 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;">