div内的响应图像，附在底部

Question

所以，我有一个带有菜单和图像的标题，我想在下面的图片中定位图像：

图像应该是响应式的，所以当我调整浏览器的大小时，它会缩小并保持连接到div的底部，重叠一点标题。

我该怎么做才能获得？我为我的代码使用bootstrap。

我的代码：

＆＃13;

＆＃13;

.container {
   width: 100%;
}

.container, .con.h {
   background-color: blue;
   height: 100px;
}

.box {
	width: 100%;
	height: 150px;
  background-color: red;
}

.container .img-logo {
	width: 800px !important;
	position: relative;
	height: auto;
}

.container .img-logo .row {
	display: block;
	max-width: 100%;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform:translateX(-50%);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container con-h">
   <div class="row col-md-12">
         Header
   </div>
</div>

<div class="container img-logo">
    <div class="row col-md-12 text-center">
    		 <div class="box">
             This is the image
         </div>
    </div>
    </div>
<br>
<br>
<br>
<br>
<br>
<br>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将“max-width：100％”应用于图像或引导程序，提供“img-responsive”类以使图像响应，但在bootstrap默认类中，您无法使img处于居中对齐状态，但使用自定义可以使其成为中心可能的。