html - 有没有办法可以将超大屏幕中图像的高度限制为超大屏幕的高度？

Question

我不确定问题是否足够清楚，也许查看网站可能会有所帮助。

http://settlecars.com

我希望在调整屏幕大小时(或在较小屏幕设备上查看时，例如智能手机)，右侧三辆车的图像保持在 inside of 与超大屏幕相同的高度.我该怎么做？

目前，这是我为网站的该部分准备的 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

完成此操作的最简单方法是在 .jumbotron 元素上设置一个 overflow:hidden; 属性。

由于您的汽车图片使用的是 position:absolute;，因此您还必须为 .jumbotron 元素提供 position:relative; 来锚定图像。

只需将其添加到您的 CSS 中:

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

编辑

当我在你的网站上使用 firebug 测试它时它工作得很好，但如果你仍然想在此之后调整它，你可以添加以下内容:

.jumbotron > img {
  height:100%;
}

感谢 position:relative; 锚定图像，这将强制图像高度进入 .jumbotron 高度。