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

Question

您可以数学上描述图像在大小属性内显示的大小。您可以使用calc（）来实现更复杂的计算，例如，如果图像之间的差距和要精确或容器不是完全宽度。

没有calc（）

：

：

Answer 1

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

我找到了另一种方法来解决此问题，并使用容器查询和懒惰的负载。 HTML看起来像这样：

<picture class="picture">
    <img class="small" src="images/cat_250.webp" loading="lazy">
    <img class="medium" src="images/cat_500.webp" loading="lazy">
    <img class="large" src="images/cat_1000.webp" loading="lazy">
</picture>

CSS看起来像这样：

Answer 2

在这种情况下，图像的宽度为250px / 500px /1000px

要在Invector的网络选项卡中正确测试此测试，然后打开禁用缓存。
    

为什么要使用3个不同的源文件？它们是同一图像的不同尺寸吗？还是您要在每个容器大小上显示完全不同的图像？如果您想要的只是为了适合其容器，您就可以通过设置一个源文件并使用CSS属性来处理它。 通过以％为单位设置图像的宽度，它会自动对图像相对于其父元素的宽度进行大小尺寸，在您的情况下，

width: 100%

.

。 除了％和PX外，还有其他单位可用于宽度。 查看本文

视图单位

Answer 3

如果您实际上想根据容器尺寸使用三个不同的图像，那么您将需要像目前一样列出所有三个来源。

本文应有所帮助：

反应图像

特别是从中摘录：

<div>

上面标记中的信息使浏览器需要弄清楚它的最佳图像。浏览器知道1）它自己的视口尺寸和2）>它自己的像素密度。 也许浏览器视口为320px宽，是1倍显示器。现在也是如此 知道它将以100VW显示此图像。所以它必须在 提供了两个图像。它有一些数学 375（图像＃1的大小） / 320（可显示图像的像素）= 1.17 1500（图像2的尺寸） / 320（可显示图像的像素）=4.69

1.17更接近1（它是1倍显示），因此375W图像获胜。据我所知

*从技术上讲，像素是一个角度的度量，例如程度和弧度，并且基于关于屏幕正在观察的距离的假设。