响应式卡片图像在引导程序4中具有固定高度.例如，

Question

我的图像分辨率为760x270，但是这个比率使它看起来太薄了，我希望它看起来更像是正方形。但是，如果我用分辨率760x500放置了更正方形的图像，我希望它仍然适合并且不扭曲。我该怎么做？

<div class="col-xs-6 col-md-4">
                        <div class="card">
                            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Card image cap">
                            <h4 class="card-title">Title</h4>
                            <div class="card-body">
                                <p class="card-text">Some quick example text to build on </p>
                                10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div>
                            </div>
                        </div>
                    </div><!--/span-->

Answer 1

您可以使用"填充技巧"将包装器强制1：1比率包装器（在运行摘要后，单击"完整页"以调整窗口大小）：

.wrapper {
  position: relative;
  overflow: hidden;
}
.wrapper:after {
  content: '';
  display: block;
  padding-top: 100%;
}
.wrapper img {
  width: auto;
  height: 100%;
  max-width: none;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="card">
        <div class="wrapper">
          <img class="card-img-top img-fluid" src="//placehold.it/760x270" alt="Card image cap">
        </div>
        <h4 class="card-title">Title</h4>
        <div class="card-body">
          <p class="card-text">Some quick example text to build on </p>
          10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-md-4">
      <div class="card">
        <div class="wrapper">
          <img class="card-img-top img-fluid" src="//placehold.it/760x500" alt="Card image cap">
        </div>
        <h4 class="card-title">Title</h4>
        <div class="card-body">
          <p class="card-text">Some quick example text to build on </p>
          10 mins ago <div class="float-right"><i class="fa fa-comment-o" aria-hidden="true"></i> 0</div>
        </div>
      </div>
    </div>
  </div>
</div>

这不是1：1的比率。调整该比率将其计算为百分比。对于4：3，这将是3 / 4 = 0.75。0.75百分比为75%。您将其用作.wrapper:after的padding-top值。