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">
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; }
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.
Use x descriptor instead of w descriptor, or specify the size you want in the sizes attribute (which is required when using w).
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">
