如何根据容器而不是屏幕大小来提供图像大小

Posted 2023-03-05

【中文标题】如何根据容器而不是屏幕大小来提供图像大小

【英文标题】：How To Serve Image Size Based on Container, Not Screen Size

【发布时间】：2020-08-01 10:22:28

【问题描述】：

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

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

<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>

【问题讨论】：

有点晚但可能对其他人有帮助：Responsive Images Guide

【参考方案1】：

您可以用数学方法描述图片在 size 属性中显示的大小。您可以使用 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>

【讨论】：

嗯，这适用于无响应的东西，但我必须做一些笨拙的事情才能让它与移动设备（可能是 100vw）和桌面（可能是 33vw）一起工作。没有简单的解决方案真是太疯狂了，但我想这些天带宽不是第一要务。

响应式布局也是可能的：sizes="(max-width: 600px) 100vw, calc(100vw / 3)"

啊完美，这正是我需要的，感谢您的帮助！

【参考方案2】：

为什么要使用 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"
      
    >

上面标记中的信息为浏览器提供了它需要弄清楚的信息 > 为它找出最佳图像。浏览器知道 1) 它自己的视口大小和 2) > 它自己的像素密度。

也许浏览器视口是 320 像素宽并且是 1 倍显示。它现在也 知道它将以 100vw 显示此图像。所以它必须在 提供的两张图片。它做了一些数学运算。

375（图像#1 的大小）/320（可用于显示图像的像素）= 1.17 1500（图像#2 的大小）/320（可用于显示图像的像素）= 4.69

1.17 更接近 1（它是 1x 显示），因此 375w 图像获胜。它会尝试 > 不下降，所以据我了解，1.3 会超过 0.99。

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

【讨论】：

纯粹是带宽考虑。所有的图像都是一样的。我知道如何以任何我想要的方式填充容器，我只想发送所需的最少数据量。

考虑带宽的示例：Google（以及我的移动 100MB 数据量）会因为您在 420w 设备上显示 1920w 图像而受到惩罚。为什么？因为 1920w j​​pg 大约有 200 - 500kb，具体取决于内容。如果按宽度缩小：50%；你不要缩小尺寸！这就是 srcset 发生的地方。谷歌和我会很高兴！