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

對此的幫助是appriciated。

Answer 1

不幸的是，沒有標準的方法（但是）將響應行爲基於容器而不是瀏覽器視口。

有community efforts約Container Queries，但還沒有定義，最終可能成爲一個標準。

有幾個JavaScript庫，如EQCSS，試圖提供解決方案，但需要JavaScript進行演示 - 但CSS-作業往往不是一個好主意。

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