有没有办法可以将jumbotron中图像的高度限制在jumbotron的高度？

Question

我不确定这个问题是否足够明确，也许看看网站可能有所帮助。

http://settlecars.com

我希望右侧三辆车的图像在屏幕调整大小时（或在较小的屏幕设备上观看时，例如：智能手机）在内部与jumbotron保持相同的高度。我怎么能这样做？

目前，这是我为网站的该部分设置的html：

<div class="jumbotron text-left">
  <h1>Liverpool Vehicle Hire</h1> 
  <p>The one stop shop for all your private hire needs <br> in the Sefton &amp; Liverpool areas.</p>
  <img src="header.png" height="357px" align="right" style="position:absolute; top: 30px; right:0px; z-index:0">
</div>

Answer 1

实现此目的的最简单方法是在overflow:hidden;元素上设置.jumbotron属性。

由于您的汽车图片使用position:absolute;这一事实，您还必须为.jumbotron元素position:relative;添加.jumbotron { overflow: hidden; position: relative; } 来锚定图片。

只需将其添加到您的CSS：

.jumbotron > img {
  height:100%;
}

修改

当我在您的网站上使用firebug进行测试时，它工作得非常好，但如果您仍想在此之后进行调整，则可以添加以下内容：

position:relative;

感谢.jumbotron锚定图片，这会迫使图片高度进入#define API_ADDR @"http://anURL.com" 高度。