響應圖像，連接到底

-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重疊。當我嘗試重疊時，它是一團糟。 –

響應圖像，連接到底

回答

相關問題