javascript - 使图像响应浏览器的宽度和高度调整大小

Question

我一直在尝试使图像按比例调整大小，留下空白，这样它们就可以始终在浏览器窗口中完全显示，而无需滚动。到目前为止我找到的所有解决方案都可以根据浏览器窗口的宽度调整图像的大小，但是如果浏览器窗口的比例与图像不匹配，那么它会切断图像，用户将不得不向下滚动看看剩下的。我知道还有 background-size: cover;但我不想剪裁图像。有什么想法吗？

Answer 1

您可以在 CSS 中尝试使用 vh 和 vw 单位。几乎所有浏览器都可以接受。

img{width:vw;height:vh;}

缺点是图像可能会缩小...所以你可以尝试 overflow hidden 。

img{width:vh;height:vh;overflow:hidden;position:center;}