Question

这是一个简单的问题，我不知道为什么我不能让这个背景图像响应.. 我正在使用bootstrap类：＆＃34; img-responsive＆＃34;使其响应。在宽度为1460像素后，图像会停止调整到宽度。

图片

ID =＆＃34;背景＆＃34;类=＆＃34; IMG响应＆＃34;在
中

div

div id =＆＃34; innerWrapper＆＃34;

这是必需的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%;
}

告诉我它是否有效。

背景图像的响应问题

1 个答案: