Img srcset auto resizing

问题

While using img srcset with no css applied to the document, I can resize the browser width and the image width changes responsively so that the full image is always displayed (but smaller).

How can I make it so that it works like a standard image tag?

e.g. Resize browser window doesn't change image size...

	<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">

回答1:

If you mean what I think you mean then this should help, put this with the CSS file and the images will resize with the page resize.

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

回答2:

You need sizes to make it responsive:

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

If you're going to make the img load the new source you need to refresh the page. As the browser pics the image on load.

回答3:

Use x descriptor instead of w descriptor, or specify the size you want in the sizes attribute (which is required when using w).

回答4:

same issue here srcset doesn't work when resizing screen, but picture + source are working

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">

来源：https://stackoverflow.com/questions/33003846/img-srcset-auto-resizing