html - 标题图像不缩放到其他屏幕

Question

我在 header div 中有一张图片。我设置了 background-size: 100% 100% 但在移动设备上，它根本没有缩放。我想在所有设备上保持图像相同。这是完整的 CSS:

background: url(Oly1600x600.jpg) no-repeat center center;
background-size: 100% 100%;
height: 600px;
position: relative;
overflow: hidden;

我试过使用 background-size: cover 并且它放大了整个图像，从顶部和底部切掉了很多。我所说的缩放的意思是，我希望原始图像能够在所有设备上显示，例如桌面浏览器、移动设备和平板电脑。如果它不能完全显示，那么图像不应该被扭曲，即拉伸(stretch)。希望这能澄清一些事情。

编辑:这是页面的链接:https://www.heroesjourney.com/olympic-weightlifting

有什么建议吗？

Answer 1

使用“背景尺寸:封面；”应该可以解决您的缩放问题，我假设您希望图像在没有空白的情况下填充容器，而这正是 cover 所做的。