css - 背景图片的响应问题

Question

这是 My fiddle :

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

图片

id="background" class="img-responsive" lies within

分区

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 的意思是:

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

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

#background{
  width: 100%;
}

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

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

告诉我它是否有效。