如何使div響應圖像

嗨我正在嘗試開發一個網頁。我應該在頁面的中心放置一張圖片。在該圖像下方，我放置了一個div，通過點擊該div可以顯示某些項目。我的問題是，當窗口的大小減小時，圖像將變爲響應，但不是該div。我要讓他們都responsive.Here是我的代碼如何使div響應圖像

的index.html

<div class="container"> 
     <div class="row"> 
      <div class="col-lg-12" style="top:-125px;"> 
       <img id="i1" class="img-responsive" src="img/2.png" height="600" width="600" alt=""> 
       <div style="padding-left:45%;top:-250px;"> 
        <div id="triangle-up"></div> 
       </div> 
      </div> 
     </div> 
    </div>

這是我的CSS

#triangle-up { 

position: absolute; 
bottom:0; 
left: 46%; 
padding: 5px; 
width: auto; 
height: auto; 
border-left: 60px solid transparent; 
border-right: 60px solid transparent; 
border-bottom: 67px solid grey; 
} 
.container 
{ 
position: relative; 
}

請幫我解決這個問題..

來源

2015-07-22 Abu P R

使用表格和地方的圖像，你可以使兩個響應和圖像可以始終居中 – Shadow

@Shadow讓我檢查。感謝您的快速回放 –

您正在將三角形div設置爲絕對位置，但您不應該這樣做。如果您正在開發自適應佈局，則不應使用絕對定位。不要使用表格佈局並將所有內聯樣式移動到CSS。另外，爲什麼你用頂部= -250px的三角形來使用容器div？ –

使用CSS將div的寬度設置爲100％，最大寬度爲像素數量，您不希望div增大到大於。

來源

2015-07-22 06:43:14 AntK

如何使div響應圖像

回答

相關問題