1

在. srcset_ sizes_ img（我正在使用图片填充，但它遵循原始规范）

我有一个图像，在大屏幕上，它是25em宽度，但在小手机屏幕上，它85%是它的容器，而不是视口。我不想在较小的屏幕上给它一个固定的大小 - 相反我希望它适应它的容器（它是 a 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">
4

1 回答 1

1

您不能，因为 HTML 与 CSS 是分开的，并且浏览器必须在加载 CSS 之前知道图像大小。因此浏览器不知道你的div.

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

于 2015-12-16T08:11:37.820 回答