如何在响应式HTML5图像中使用srcset和尺寸，以获得占其容器百分比的图像？

Question

我在使用srcset上的sizes和img属性时感到困惑。 （我使用picturefill，但它遵循原始规范）

我有一张图片，在大屏幕上，它的宽度为25em，但在小型手机屏幕上，它是85%的容器，不是<视口的/ em>。我不想在较小的屏幕上给它一个设定的大小 - 而是我希望它适应它的容器（这是一个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加载图像之前，所有图像宽度必须是可计算的。