响应图像，连接到底

-1

所以，我有一个菜单和图像的头，我想在下面的PIC图像定位，如：响应图像，连接到底

的形象应该是因此，当我调整我的浏览器的大小时，它会缩小并保持连接到div的底部，重叠一点头部。

我该怎么做才能获得？我为我的代码使用引导程序。

我的代码：

.container { 
 
    width: 100%; 
 
} 
 

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

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

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

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

<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"> 
 
    \t \t <div class="box"> 
 
      This is the image 
 
     </div> 
 
    </div> 
 
    </div> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

来源

2017-03-17 astronomy-domine

嗨，欢迎来到SO！你到目前为止尝试过什么吗？不幸的是，SO不是一种编码服务。请更新您的问题以显示您已经尝试过的内容。 – ZimSystem

是的，我试图把里面的行放在一个容器中，使用位置：relative和position：absolute作为百分比，但它不起作用。 –

好的，所以在问题 – ZimSystem

你可以申请“最大宽度：100％”，以图像或引导给“IMG响应”类使图像响应，但在引导默认你不能让img在中心对齐，但是通过自定义你可以使它成为可能。

来源

2017-03-17 13:37:55 Rohan

Img-responsive没问题，但是我想将白色的头与图中的div重叠。当我尝试重叠时，它是一团糟。 –

响应图像，连接到底

回答

相关问题