javascript - 如何调整图像的大小，使其在不大于窗口高度或窗口宽度的情况下始终尽可能最大？

Question

我想要一张尽可能大的图像，但无论窗口如何调整大小，我都希望图像 100% 可见。我也想保持图像比例。

我试过

img{
   width: 100vh;
}

但这会根据窗口的大小 chop 一些图像。

下面是我想要的一些示例:

When the width is restrictive

When the height is restrictive

Answer 1

您可以尝试使用屏幕尺寸设置图像，然后使用 object-fit: cover 来设置图像始终适合容器；

img{
   width: 100vw;
   height: 100vh;
   object-fit: contain;
}