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?
精彩评论