如何根据容器而不是屏幕尺寸提供图像尺寸

Question

我一直在搜索响应式图像帖子和示例，但找不到解决方案。看起来这应该很容易，我可能只是错过了一些东西：我如何根据容器宽度而不是屏幕宽度提供适当的图像大小？

即我有一个桌面屏幕，1980px 宽，但弹性容器是屏幕的 1/3，因此最大图像尺寸只需为 660px 宽，因此它应该显示 800w 图像。但 srcset 只会超出屏幕尺寸，所以即使我显示缩略图，它也会加载 1200w 的图像。有没有办法动态地做到这一点。即仍然使用 flebox 和动态宽度，但它是否根据容器宽度而不是屏幕宽度提供适当的尺寸？任何帮助将不胜感激，谢谢！

<div class="flex justify-center w-1/3 mx-auto">
<img
  srcset=" srcset="size-1.jpg 400w,
  size-2.jpg 800w,
  size-3.jpg 1200w,"
  sizes=" (min-width: 1200px) 1200px, (min-width: 800px) 800px, 400px"
/></div>

Answer 1

您可以用数学方式描述在 Sizes 属性中图像将显示的大小。您可以使用 calc() 来实现更复杂的计算，例如，如果图像之间有边距并且您想要精确，或者容器不是全宽。

没有 calc() 的示例：

<div class="flex justify-center w-1/3 mx-auto">
  <img
    srcset="size-1.jpg 400w,
    size-2.jpg 800w,
    size-3.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33.33vw"
  />
</div>

calc() 示例：

<div class="flex justify-center w-1/3 mx-auto">
  <img
    srcset="size-1.jpg 400w,
    size-2.jpg 800w,
    size-3.jpg 1200w"
    sizes="(max-width: 600px) calc(100vw - 30px), (max-width: 1200px) calc(50vw - 30px), calc(33.33vw - 30px)"
  />
</div>