如何在响应HTML5图像中使用srcset和size作为容器百分比的图像？

Question

I'm confused by a few things in using the srcset and sizes attributes on an img . (I'm using picturefill but it follows the original spec)

I have an image and on large screens, it's 25em in width but on small phone-screens, it's 85% of its container, not of the viewport. I do not want to give it a set size on smaller screens - instead I want it to adapt to its container (which is a div ). I cannot figure out how to do this.

I also am not happy that I have to hardcode sizes and media queries into the HTML instead of putting them in CSS - it puts the same information in two places. Is there a way around this?

What I have:

<!--
    Is there any way to make the sizes be percentages of the container?
-->
<img 
    sizes="(min-width: 1000px) 750px, (min-width: 200px) 50vw" 
    srcset="images/full_0.png 750w, images/small_0.png 187w" 
    alt="Sizing">

What I want:

<!--
    The "use-750w" tells it which image to load but NOT the size
    to make it. Instead, it lets CSS size the image.
-->
<img 
    sizes="(min-width: 1000px) use-750w, (min-width: 200px) use-187w" 
    srcset="images/full_0.png 750w, images/small_0.png 187w" 
    alt="Sizing">

Answer 1

You can't because the HTML is separated from the CSS and the browser must know the image size before the CSS is loaded. Therefore the browser does not know the width of your div .

You can give lazysizes a try. In this case all image width must be computable before the image is loaded via CSS.