背景图像的响应问题

Question

这是My fiddle：

这是一个简单的问题，我不明白为什么我不能让这个背景图像响应.. 我正在使用引导类：“img-responsive”来使其具有响应性。 在宽度达到 1460 像素后，图像停止适应宽度。

图片

id="background" class="img-responsive" 位于

div

div id="innerWrapper"

这是所需的css代码：

#innerWrapper{
    border: 2px solid;
    float:none;
    position: relative;
    overflow:hidden;
    width:100%;
    display:block;
    height: auto;   
    background: no-repeat scroll 0 0;
    background-size: 100% 100%;
}

#background{
    max-width:100% !important;
    height:auto;
    display:block;
}

我使用http://designmodo.com/responsive-test/ 进行响应式测试。

Answer 1

您的问题是 .img-responsive 类定义了以下 CSS：

.img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
}

这个 CSS 的意思是：

无论我的图像尺寸是多少，它都会占用所有空间以适应其自然宽度 (1279 像素)，但如果它溢出其包装器，它将适合它。

如果您希望您的图像始终适合其包装器的大小，则必须指定以下 css：

#background{
  width: 100%;
}

但这还不够，如果你想让你的图片保持它的纵横比，你还必须指定 height 属性：

#background{
   width: 100%;
   height: 100%;
}

告诉我它是否有效。