<source />媒体属性 - 容器的宽度而不是屏幕？

Question

我在评估其所在容器的大小后，使用<picture></picture>标记响应地显示图片。

一些示例代码：

<picture>
            <source media="(max-width: 70px)" srcset="IMAGE_URL">
            <source media="(min-width: 71px) and (max-width: 170px)" srcset="IMAGE_URL">
            <source media="(min-width: 171px) and (max-width: 270px)" srcset="IMAGE_URL">
            . . .
            <img src="IMAGE_URL" alt="An image">
</picture>

但是，上述格式实现中的<source media="(MEDIA_QUERY)" ... >部分会考虑整个屏幕的宽度，而不是<picture></picture>当前所在的容器。

对此有所帮助。

Answer 1

遗憾的是，没有标准方法（尚未）将响应行为基于容器而不是浏览器视口。

community efforts周围Container Queries，但尚未定义，最终可能成为标准。

有几个JavaScript库，比如EQCSS，试图提供解决方案，但需要JavaScript才能进行演示 - 因此CSS作业通常不是一个好主意。

您还可以查看CSS Conditions，但它也需要JavaScript。