如何用引导带避免部分图像掉到窗外

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

添加

Class=“img-响应”

对像

Answer 3

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