引导程序4中具有固定高度的响应式卡片图像 [英] Responsive card image with fixed height in bootstrap 4

问题描述

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

I have an image with a resolution of 760x270, for example, but this ratio makes it look too thin and I want it to look more like a square. However, if I put a more square-ish image with a resolution 760x500 for example, I want it to still fit and not distort. How can I do this?

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

推荐答案

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

You can force a 1:1 ratio with a wrapper using the "padding trick" and then absolutely position the image in the wrapper so that it is centered and takes up 100% of the height of the wrapper (click "full page" after running the snippet to adjust the window size):

.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 之后的填充顶部值。

Not that this is for a 1:1 ratio. To adjust this ratio compute it as a percent. For 4:3, this would be 3 / 4 = 0.75. 0.75 as a percent would be 75%. You would use this as the padding-top value of .wrapper:after.

这篇关于引导程序4中具有固定高度的响应式卡片图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！