html - 如何保持宽高比但调整背景图像大小以适合整个屏幕,即使它不能显示整个图片

标签 html css

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

我怎样才能调整图像的大小,使其保持此宽高比,但覆盖整个屏幕,即使这意味着要裁掉一些图片?

最佳答案

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

或者,如果不是这种情况,请提供您代码的有效测试用例,以便我们了解实际情况。

关于html - 如何保持宽高比但调整背景图像大小以适合整个屏幕,即使它不能显示整个图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57634306/

相关文章:

html - 我如何获得像这张图片这样的 css html 菜单下拉菜单

javascript - 根据 div id 应用更改

javascript - 点击简单按钮时页面会刷新?

html - 将数据放入Golang下拉列表

javascript - 授权 header 行为的说明

Jquery 没有显示所有增强的动态附加单选按钮

html - 如何使用 margin :0 auto without setting width of inner div

css - 在溢出 :hidden div 内水平居中图像

javascript - 我怎样才能简化这段代码? JavaScript + CSS3

python - Plotly Dash API 文档