标题图片未缩放到其他屏幕

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并将整个图像放大，从顶部和底部切断很多。缩放的意思是，我希望原始图像能够在所有设备上显示，例如桌面浏览器，移动设备和平板电脑。如果它不能完全显示，那么图像不应该被扭曲，即拉伸。希望清除一些事情。

编辑：以下是该页面的链接：https://www.heroesjourney.com/olympic-weightlifting

有什么建议吗？

Answer 1

试试这个：background-size: cover;

Answer 2

使用＆＃39; background-size：cover;＆＃39;应该解决你的缩放问题，我假设你希望图像在没有空格的情况下填充容器，而这正是封面的作用。

Answer 3

.img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

链路： - http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries 或

  #header img{ 
           max-width: 80%;
    }