Question

在使用没有应用于文档的css的img srcset时，我可以调整浏览器宽度并响应性地更改图像宽度，以便始终显示完整图像（但更小）。

如何制作它以使其像标准图像标签一样工作？

e.g。调整浏览器窗口大小不会更改图像大小...

	<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

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

Answer 4

同样的问题这里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">

Img srcset自动调整大小

4 个答案: