CSS：背景图像不能在移动设备上缩放答案

【问题标题】：CSS : Background image not rescaling on mobileCSS：背景图像不能在移动设备上缩放
【发布时间】：2018-04-27 00:24:20
【问题描述】：

我不是编码员，但有一些基本知识，并且一直在编辑模板。该网站几乎就在那里 - 在桌面上看起来不错，但在移动设备上，封面图片并没有缩小。

我尝试将大小从 100%、auto 和 cover 更改为 vw 和 vh 等，但仍然无法正常工作。

这是 CSS：

.intro {
  display: table;    
  height: auto;    
  width: auto; /* 100% originally */ .   
  padding: 0;    
  text-align: center;    
  color: #333;    
  background: url(../img/intro-bg.jpg) no-repeat center top;    
  background-color: #e5e5e5;    
  -webkit-background-size: cover;    
  -moz-background-size: cover;    
  background-size: auto;    
  -o-background-size: auto;    
}

如果有人可以提供帮助，那就太好了！该网站是 adammillsmusic.com

谢谢！

【问题讨论】：

标签： css image background header

【解决方案1】：

对于响应式图像，在 .intro 类中执行以下操作

intro {
    max-width: 100%;
    height: auto;
    display:block;
    padding: 0;
    text-align: center;
    color: #333;
    background: url(../img/intro-bg.jpg) no-repeat center top;
    background-color: #e5e5e5;
    background-size: contain;
    -webkit-background-size: contain
}

关键变化

max-width: 100%;
height: auto;
display:block;

希望对你有帮助

【讨论】：

【解决方案2】：

您正在为属性添加不同的值：

-webkit-background-size: cover; : 在 webkit (Chrome & co) 上，覆盖背景
background-size: auto;在其他浏览器上，请勿覆盖

这可能就是您在桌面上看到被遮盖的背景并在移动浏览器上看到意外结果的原因。

body {
  display: table;    
  height: auto;    
  width: auto; /* 100% originally */ .   
  padding: 0;    
  text-align: center;    
  color: #333;    
  background: url(//placecage.com/200/200) no-repeat center top;    
  background-color: #e5e5e5;    
  background-size: cover;     
}

【讨论】：

【解决方案3】：

将您的max-width 设置为 100%，如下所示：

max-width: 100%;

【讨论】：

【解决方案4】：

感谢您的帮助 - 这确实解决了问题。虽然现在在看到结果之后，我认为通过在移动网站上使用“@media”来调用较小尺寸的图像可能会更明智。唯一的问题是在我的代码编辑器中，当我尝试执行此操作时，它似乎无法识别“@media”标签并将其视为 /* */ 有什么想法吗？！谢谢

@media screen and (max-width: 600px) {
.intro {background-color: #e5e5e5;
background: url(../img/Bg-mountain-small.png) no-repeat center top;
}

【讨论】：