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

Question

我使用<picture></picture>标签评估它在容器的大小后，响应显示图像<source>媒体属性 - 容器的宽度而不是屏幕？

一些示例代码：

<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>内部的容器。

对此的帮助是appriciated。

Answer 1

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

有community efforts约Container Queries，但还没有定义，最终可能成为一个标准。

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

你也可以看看CSS Conditions，但它也需要JavaScript。