如何使用Bootstrap避免部分图像落在窗口外

Question

在网站www.peek.solutions上，我正在尝试改善“关于”部分中图片的布局。现在我注意到当我使用默认窗口大小打开网站时，图像的一部分不在视图中（参见下面的屏幕截图）。但是，我希望将左侧的文本更多地包裹起来并使整个图像可见。我怎么能实现这个目标？

以下是控制此<div>的代码。

<!-- Container (About Section) -->
<div id="about" class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <h2>About us</h2><br>
      <h4>Peek Solutions, an independent consulting company founded by Ralf Peek, provides pipeline integrity solutions and assurance support to the energy industry, including the application of structural reliability methods to assess and ensure integrity.</h4><br>
      <br>
      <a href="#contact" class="btn btn-default btn-lg" role="button">Get in touch</a>
    </div>
    <div class="col-sm-4">
      <img src="img/ZRB_buckle_trigger_resized_30_percent.jpg"></img>
    </div>
  </div>
</div>

我在考虑将8-4比率更改为6-6，但这并不能确保图像始终完全可见。有更好的方法吗？

Answer 1

指定图像标记内的宽度。 <img src="source" style="width:100%" />

Answer 2

添加

  

类= “IMG响应”

到图像

Answer 3

将class="img-responsive"添加到您的img标记可以解决您的问题。它是一个Bootstrap类，可以在不改变宽高比的情况下将图像缩放到父容器。