javascript - 我如何在响应式 HTML5 图像中使用 srcset 和大小来获取占其容器百分比的图像？

Question

我对使用 srcset 的一些事情感到困惑和 sizes img 上的属性. (我正在使用 picturefill 但它遵循原始规范)

我有一张图片，在大屏幕上，它是 25em在宽度上但在小手机屏幕上，它是 85%它的容器，不是视口(viewport)。我不想想在较小的屏幕上给它一个设定的大小——相反我想让它适应它的容器(这是一个 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 加载图像之前，所有图像宽度都必须是可计算的。