开发者

Container query units in sizes attribute image tag not working

开发者 https://www.devze.com 2022-12-07 17:40 出处:网络
When using container query width (cqw) in the sizes attribute of an image tag the incorrect image variation is requested.

When using container query width (cqw) in the sizes attribute of an image tag the incorrect image variation is requested.

<style>
  div {
    container-type: inline-size;
    width: 100px;
  }
  
  img {
    widt开发者_运维百科h: 100%;
    height: auto;
  }
</style>
<div>
  <img sizes="100cqw" srcset="
          https://via.placeholder.com/100   100w,
          https://via.placeholder.com/400   400w,
          https://via.placeholder.com/1000 1000w
        " />
</div>

When running this code you will see that the 1000w variation is requested. While you would expect that 100w or 400w to be requested (depending on your screen DPI), because the container has a width of 100px.

Does someone know if container query width is supported by the sizes attribute?

0

精彩评论

暂无评论...
验证码 换一张
取 消