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

Question

我被一些事情在使用混淆srcset和sizes上的属性img 。 （我使用的是picturefill，但它遵循原始规范）

我有一个图像，在大屏幕上，它的宽度为25em ，但在小手机屏幕上，它是其容器（ 而不是视口）的85% 。 我不想给它在小屏幕上设置大小-相反，我希望它适应它的容器（这是一个div ）。 我不知道该怎么做。

我也很高兴我必须将大小和媒体查询硬编码到HTML中，而不是将它们放在CSS中-它会将相同的信息放在两个地方。 有没有解决的办法？

我有的：

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

我想要的是：

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

您不能这样做，因为HTML与CSS分离，并且浏览器必须在加载CSS之前知道图像大小。 因此，浏览器不知道div的宽度。

您可以尝试lazysizes 。 在这种情况下，在通过CSS加载图像之前，所有图像宽度都必须是可计算的。