css - 为什么我们可以在 img 标签中使用 size 属性，因为我们可以将媒体查询与图像容器一起使用？

Question

好的，情况就是这样：当视口大小为 800 像素或更大时，我们希望在 50% 的视口中显示图像，否则图像为 100%，因此 html 如下所示：-

<div class="container">
  <img src="image.jpg" srcset="image.jpg 500px" sizes="(min-width:800px) 50vw,100vw" />
</div>

或者我们可以通过 css 简单地执行以下操作：-

.container img{
   min-width:100%;
}
@media screen and (min-width:800px){
  .container{width:50%}
}

所以我们可以控制图像容器而不是图像本身，我的问题是是否存在将 size 属性视为最佳解决方案的条件？

注意：- 我知道在第一个示例中，图像大小将根据视口宽度而不是容器宽度计算

Answer 1

如果你真的只有一个图像资源，那么你可以只用 CSS 来做到这一点。srcset+sizes仅当您想让浏览器从一组具有不同大小的多个文件中选择要下载的图像文件时才需要。在这种情况下，基于视口 insizes是唯一的选择（因为浏览器在下载外部 CSS 之前开始下载图像，因此容器大小是未知的）。