处理图像大小 + 引导时遇到问题答案

【问题标题】：Having trouble manipulating image size + bootstrap处理图像大小 + 引导时遇到问题
【发布时间】：2017-09-27 23:37:13
【问题描述】：

大家好，我有点不知所措。

我正在尝试重新创建此网页：

我的结果如下所示：

图片有问题。我在我想要的地方做得很好，但我似乎无法获得与参考图像匹配的高度。我认为它可以很好地融入引导行，而不需要太多 css。

这是我的代码：

<div class="content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-6">
					<h1>Lorem </br> Ipsumsz</h1> </br> <p>Lorem Ipsum dolor sit amet consecetur adipised do </br>           elusmod tempor incididunt. Adipised do eiusmod tempor.</p>
				</div>
				<div class="col-lg-6">
					<h1 id="bigNumber">01</h1>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-8 col-lg-offset-4">
					<img src="olu-eletu-27968.jpg" class="img-responsive center-block">
				</div>
			</div>
		</div>
	</div>

【问题讨论】：

标签： html image twitter-bootstrap-3

【解决方案1】：

引导行没有固有高度。它们会扩展以适应您放入其中的任何内容。因此，您需要在 .row 上设置 height 或 max-height CSS 属性。

另一个技巧是您希望以与其自然状态不同的裁剪和纵横比显示图像。换句话说，您不想显示完整图像，只显示其中的一部分。 You can do this 与 <img> 与 <div> 的组合，但感觉有点 hacky，因为你必须使用负边距。我认为将图像设置为background-imageusing CSS 更容易。

试试这样的：

<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-6">
        <h1>Lorem <br> Ipsumsz</h1> <br> <p>Lorem Ipsum dolor sit amet consecetur adipised do <br>           elusmod tempor incididunt. Adipised do eiusmod tempor.</p>
      </div>
      <div class="col-lg-6">
        <h1 id="bigNumber">01</h1>
      </div>
    </div>
    <div class="row" style="height: 300px;">
      <div class="col-lg-8 col-lg-offset-4" style="background-image: url('olu-eletu-27968.jpg'); background-position: center;">
      </div>
    </div>
  </div>
</div>

PS。你的</br> 标签应该是<br>。 `' 是一个无效标签，很可能会被您的浏览器忽略。

【讨论】：