css - Img srcset 自动调整大小

Question

在使用 img srcset 且未将 css 应用于文档时，我可以调整浏览器宽度的大小，并且图像宽度会相应更改，以便始终显示完整图像（但更小）。

我怎样才能使它像标准图像标签一样工作？

例如，调整浏览器窗口大小不会改变图像大小...

	<img src="http://lorempixel.com/400/200/"
	     srcset="http://lorempixel.com/160/200/ 160w, 
	              http://lorempixel.com/320/200/ 320w, 
	              http://lorempixel.com/640/200/ 640w, 
	              http://lorempixel.com/1280/200/ 1280w">

Answer 1

如果您的意思是我认为您的意思，那么这应该会有所帮助，请将其放在 CSS 文件中，图像将随着页面大小的调整而调整。

img { height:100%; width:auto; }

Answer 2

您需要尺寸以使其响应：

<img srcset="large.jpg  1024w,
      medium.jpg 640w,
      small.jpg  320w"
   sizes="(min-width: 36em) 33.3vw,
      100vw"
   src="small.jpg"/>

如果您要让 img 加载您需要刷新页面的新源。当浏览器在加载时对图像进行拍照。

Answer 3

同样的问题在这里 srcset 在调整屏幕大小时不起作用，但图片 + 源正在工作

img{
    max-width:100%;
    width:auto;
    height:auto;
}


<img src="images/1000/1.jpg" srcset="images/200/1.jpg 320w, images/1000/1.jpg 800w, images/1500/1.jpg 1200w, images/2500/1.jpg 1600w">

Answer 4

使用x描述符而不是w描述符，或者在属性中指定您想要的大小sizes（使用时需要w）。