html - 使用 bootstrap 将响应图像对齐到 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 等工具手动调整图像大小。