如何保持纵横比但调整背景图像大小以适应整个屏幕，即使它不能显示整个图片

Question

我想做这样的事情：PhotoView fit screen height maintain aspect ratio 在 CSS 中，如前两张图片所示。我目前使用的方法，覆盖，在移动设备上变得愚蠢，因此背景图像仅覆盖上述部分，如this。

如何调整图像的大小以使其保持此纵横比，但覆盖整个屏幕，即使这意味着剪掉一些图片？

Answer 1

object-fit: cover 是正确的使用方法。您的问题似乎在于容器的高度。尝试为它设置min-height: 100vh;？

或者，如果不是这样，请提供代码的工作测试用例，以便我们了解实际情况。