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

Question

我想做这样的事情：PhotoView 适合屏幕高度保持 CSS 中的纵横比，如前两张图片所示。我目前使用的方法，覆盖，在移动设备上变得很傻，所以背景图像只覆盖上面的部分，就像这样。

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

标签： htmlcss

Answer 1

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

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