bootstrap 4 中不正确的响应图像纵横比

Question

我想在 bootstrap 网格中的两个图像之间放置一个文本。但是行部分中的图像改变了它们的纵横比（原来是1:1）并且没有正确调整大小。

(Codepen: https://codepen.io/Oktocorp/pen/yMxpwX?editors=1100)

<div class="container">
  <div class="row">
    <img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
    <p class="text-center col-lg-6 col-md-6 col-sm-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <img class="img-fluid rounded-circle col-lg-3 col-md-3 col-sm-12" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
  </div>
</div>

Answer 1

不要将网格列 class 放在 img 和 p 标签上。而是用所需的 bootstrap classes 将它们包装在 div 元素中。这样做的原因是 bootstraps col-* classes 需要使用 width 和 max-width 属性，因此它们将在 img-fluid 上覆盖你的 css class。例如，如果您使用 col-md-6，那么该元素的宽度需要为其父元素的 50% - 它不能同时为 50% 和 100%。所以你想让你的 img 元素成为那些元素的子元素。

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-3 col-lg-3">
      <img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
    </div>
    <div class="col-lg-6 col-md-6 col-md-6 ">
      <p class="text-center ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div>
    <div class="col-sm-12 col-md-3 col-lg-3">
      <img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective1">
    </div>
  </div>
</div>

也为您的 img-fluid class 将 css 更改为：

.img-fluid {
  width: 100%;
  height: auto;
}

Answer 2

网格卡片列用于图像和段落。它们是内容的容器。

http://www.codeply.com/go/5sip6gvYFE

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-12 text-center">
            <img class="img-fluid rounded-circle" src="https://image.ibb.co/dEZA5a/true_detective1.jpg" alt="true_detective1">
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 text-center">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-12 text-center">
            <img class="img-fluid rounded-circle" src="https://image.ibb.co/jRigBF/true_detective2.jpg" alt="true_detective2">
        </div>
    </div>
</div>

bootstrap 4 中不正确的响应图像纵横比

Incorrect responsive images aspect ratio in bootstrap 4

css

twitter-bootstrap-4

responsive