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

Question

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

即我有一个桌面屏幕，1980px 宽，但是一个 flex 容器是屏幕的 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

为什么要使用 3 个不同的源文件？它们只是同一图像的不同尺寸，还是您想要在每个容器尺寸上显示完全不同的图像？

如果您只想让图片适合其容器，您只需设置一个源文件并使用 CSS 属性 width: 100% 像素即可将其转换为距离单位，如英寸*。通过以 % 为单位设置图像的宽度，它会自动根据其父元素的宽度调整图像的大小，在您的情况下为 <div>.

除了 % 和 px 之外，您还可以使用其他单位来表示宽度。查看这篇文章 Viewport Units。

如果您真的想根据容器大小使用三个不同的图像，那么您将需要像当前一样列出所有三个来源。

这篇文章应该对您有所帮助：Responsive Images 特别摘自它：


    <img
      sizes="(min-width: 400px) 80vw, 100vw"
      srcset="examples/images/small.jpg 375w,
              examples/images/big.jpg 1500w"
      alt="…"
    >

The information in the markup above gives the browser what it needs to figure > out the best image for it. The browser knows 1) it’s own viewport size and 2) > it’s own pixel density.

Perhaps the browser viewport is 320px wide and it’s a 1x display. It now also knows it will be displaying this image at 100vw. So it has to pick between the two images provided. It does some math.

375 (size of image #1) / 320 (pixels available to show image) = 1.17 1500 (size of image #2) / 320 (pixels available to show image) = 4.69

1.17 is closer to 1 (it’s a 1x display), so the 375w image wins. It’ll try to > not go under, so 1.3 would beat 0.99, as far as I understand it.

* 从技术上讲，像素是角度的度量，例如度数和弧度，并且基于对屏幕观看距离的假设。

Answer 2

您可以用数学方法描述图像在 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>

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

How To Serve Image Size Based on Container, Not Screen Size

html

css

image

image-processing

responsive