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

您可以使用＆＃34;填充技巧强制使用包装器1：1的比例＆＃34;然后将图像绝对定位在包装器中，使其居中并占据包装器高度的100％（单击＆＃34;整页＆＃34;运行代码片段后调整窗口大小）：

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

这不是1：1的比例。要调整此比率，请将其计算为百分比。对于4：3，这将是3 / 4 = 0.75。 0.75百分比为75%。您可以将其用作padding-top的{{1}}值。

响应卡片图像与固定高度在bootstrap 4

1 个答案: