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

Question

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

IE。我有一个 1980 像素宽的桌面屏幕，但是一个 flex 容器是屏幕的 1/3，所以最大图像尺寸只需要 660 像素宽，所以它应该显示 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

您可以用数学方法描述在尺寸属性中显示的图像有多大。您可以使用 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>