srcset

问题 I am currently trying to make better responsive images on my site. After some research I found the the srcset and sizes attributes. My goal here is the following: When the screen size is above 600px or below 300px I want to serve a 250x250 image When it is between these two values I want to serve a 350x350 image Also I want higher resolution images for screens which have a higher pixel ratio This is what I came up with. But it is not working as I though it would. The small 250x250 is always

问题 The <img> element srcset attribute is consistently choosing the larger <img> src , even when the size media query is false. Using a <picture> element to enforce image selection according to browser width worked well. I understand by this answer that <picture> and <img> srcset attributes work differently, <picture> elements can enforce image selection according to rules while <img> srcset yields choice to the browser's discretion. This can be according to screen pixel densities, network speed,

问题 After reading all day about one method or the other I am still not sure what is the best for me, all sites explain the same thing but when I want to know the things that really worries me, nobody talks about that. My case: I have almost all my images using width 100% and height to auto, and the image containers had dynamic size, for example 30vw, or 40%, etc. (not sure if in this case I still need to set height and width values in the img tag) What I need to use if I want to provide different

来源： https://stackoverflow.com/questions/40890825/explain-w-in-srcset-of-image

来源： https://stackoverflow.com/questions/40890825/explain-w-in-srcset-of-image

问题 I forked and ammended a simple codepen this morning while I've been trying to understand the srcset and sizes markup and the maths behind how the image gets selected at certain break points. Here is the pen: http://codepen.io/patrickwc/pen/Ijuwq Copied here: html: <div class="container"> <div class="container__item"> <img src="http://placehold.it/320x320" srcset="http://placehold.it/1536x1536 1536w, http://placehold.it/1024x1024 1024w, http://placehold.it/900x900 900w, http://placehold.it

问题 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

问题 I am using server-side image resizing dynamically through URLs like <img src="converter/500w/picture.jpg"> . This means that I have a practically infinite amount of image sizes I am able to serve. Right now I am using <img srcset="..."> (as well as <picture> tags) to serve a variety of more or less randomly chosen image sizes. However, this leads to a lot of markup, and is not really flexible. Is it possible to use srcset (or other HTML markup) to tell the browser how to request images of

问题 I'm working on a page that has the following markup: <img alt="" src="/banner_home.300x200.jpg" srcset="/banner_home.300x200.jpg 320w, /banner_home.600x400.jpg 480w, /banner_home.728x242.jpg 768w, /banner_home.920x306.jpg 960w, /banner_home.1234x400.jpg 1280w"> and it seems that in the latest Chrome & Opera, they ignore whatever the screen size is and just output whichever file is listed last (so the 1234x400.jpg in my case). Using Picturefill, Firefox and Safari both show the correct image

问题 Questions about the <img srcset=".." sizes=".."/> html tag + attributes for responsive images. On a 3x retina display (3 * 341 = 1023), does a w-descriptor in srcset refer to device pixels (1023px) or to layout/css pixels (341px) ? EDIT: Obviously the w-descriptor specifies the image resolution, which has nothing to do with either the device pixels or the css pixels. But the question is, how does the browser pick one of the provided images? Based on device pixels, or based on css pixels? Does