有没有一种方法可以将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>

- E.Owen

Answer 1

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

由于您的汽车图像使用了position:absolute;，因此您还需要为.jumbotron元素设置position:relative;以锚定图像。

只需将以下内容添加到您的CSS中：

.jumbotron {
  overflow: hidden;
  position: relative;
}

编辑

当我使用Firebug在您的网站上测试时，它完美地运行了，但如果您仍然想在此之后进行微调，可以添加以下内容：

.jumbotron > img {
  height:100%;
}

感谢使用 position:relative; 定位图像，这将强制图像高度与 .jumbotron 高度相同。

- Frits

---

嗨，弗里茨！谢谢你这么快的回复。我现在会尝试一下！ - E.Owen

当然没问题。我添加了一个编辑，如果您需要的话还有一个额外的可选调整。 - Frits

那会强制img始终填充jumbotron的高度吗？如果是这样，那可能会好得多。 - E.Owen

是的，但只有在您为 .jumbotron 设置了 position:relative; 后，溢出才更像是这种情况下的安全网 :) - Frits

谢谢！我刚刚完成了。只需要等公司回复我们的标志，然后我就可以将该网站标记为完成！再次感谢您的帮助！ - E.Owen

好答案。记得给问题点赞哦；-) - Type-Style