CSS : Background image not rescaling on mobile

Question

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

我已经尝试将大小从 100%、自动和封面更改为 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

谢谢!

Answer 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;

希望对你有帮助