使用引導程序將響應圖像與div的底部對齊

Question

我正在嘗試使響應圖像在任何屏幕分辨率下都不會在div底部顯示空格。

我網站的鏈接為107.170.157.210/wireless/（請注意：解決問題后，我將刪除此鏈接，但是如果其他人需要，我將保留其余問題）

特定的問題在於html的這一部分：

<!-- This is inside the .intro class --> 
<div class="col-sm-7 col-md-7">
<div class="intro-img">
    <img src="img/Models_tall.png" class="img-responsive" alt="Responsive image" />
</div>
</div>

相應的CSS是

.intro {
    max-width:100%;
  max-height:590px;
  height:auto;
    position:relative;
  background-color:#67B0D1;
}


.intro-img{
 /*I had stuff here but got rid of it because I'm bad at css*/
}

在某些分辨率下，圖像可能看起來還不錯，但是，例如，在我的顯示器上，如果我將瀏覽器窗口的大小設為屏幕尺寸的一半，則圖像下方會有很多藍色空間，並且我希望它位於屏幕底部藍色div（簡介）。

Answer 1

只需從實際具有映像的.intro-img父div中刪除col-sm-7 col-md-7 。 在調整瀏覽器窗口大小或在較小設備上時，這不會顯示切割的零件顯示。 但是在某些分辨率下，無法從右側看到完整的圖像。

另一個解決方案可以是；

.col-sm-7.col-md-7 { /* change selector otherwise this will select all bootstrap .col-sm-7.col-md-7 */
position: absolute; 
bottom: 0px; 
right: 0px;
}

為此，您必須通過CSS調整圖像的大小，或者使用Adobe Photoshop類的工具手動調整圖像的大小。