html - 背景大小 : cover causing background image to partially be hidden

Question

我正在尝试制作一个简单的着陆页，我有一个标题、带有背景图片的内容 div 和一个页脚。我希望它能够响应，所以为了保持大小，我使用了 background-image:cover。现在的问题是，在不同的屏幕上，图像需要放大很多以至于它的一部分被隐藏了，就像这样:

正如您所注意到的，部分文本被剪切了。有什么想法吗？

Answer 1

正如 BenM 所说，您必须在两者之间做出选择

1) 扭曲图像

2) 用封面剪裁

3) 使用 contains 在两侧保留空白。

但是，如果你的问题主要是必须始终显示图像的底部，则可以设置 background-position-y: 100%;

这将确保始终显示图像的底部(但会在顶部剪切更多...)