如何使图像显示为正方形？

Question

我最近一直在使用 bootstrap 4 alpha 版本来创建一个项目，经过大量尝试后，我无法让上传的不同尺寸的图像在显示它们时显示为正方形。

还记得 Instagram 仅显示缩略图的方形图像吗？我想实现这一目标。我做了一些研究并尝试了其他人写的一堆东西，但唯一接近的就是这个： https://stackoverflow.com/a/23518465/1067213

但结果并不是我真正想要的：

如您所见，图像不是方形的，第一张下方有一个间隙，以便与其他两列对齐（我确实希望所有列的宽度和高度相同）。

我使用 Django 创建图像文件的 URL。

这是我的html：

<div class="row">
    {% if competition_list %}
    {% for competition in competition_list %}

        <div class="col-md-4">
          <div class="card">
            <div class="image">
            <img class="card-image-top img-fluid" src="/{{competition.image.url}}" >
            </div>
            <div class="card-block">
              <h4 class="card-title">{{competition.name}}</h4>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p><a class="btn btn-secondary" href="https://v4-alpha.getbootstrap.com/examples/jumbotron/#" role="button">View details »</a></p>
            </div>
            </div>
        </div>

    {% endfor %}
    {% else %}
    <p>No competitions in this category, please try an other category</p>
    {% endif %}
    </div>

这是我的 CSS：

.card {
    margin-bottom: 10px;
}

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}

理想的结果应该是这样的：

如果您需要更多信息，请告诉我。

提前致谢！

Answer 1

您可以使用包装器并使用宽度、最大宽度和最小高度：

<div class="image-wrapper">
  <img src="http://placehold.it/350x300">
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/500x350">
</div>

<div class="image-wrapper">
  <img src="http://placehold.it/300x500">
</div>

您将宽度设置为 100%，它会缩放高度。

.image-wrapper {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  margin: 10px 0;
}
.image-wrapper img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

添加、顶部、左侧和变换，使图像垂直居中。

您还可以使用 background-size: 覆盖和播放背景位置。

<div class="use-cover-background square" style="background-image: url(http://placehold.it/350x300)"></div>

<div class="use-cover-background square" style="background-image: url(http://placehold.it/500x300)"></div>

<div class="use-cover-background square" style="background-image: url(http://placehold.it/300x500)"></div>

// CSS

.use-cover-background {
  background-size: cover;
  background-position: center;
}
.square {
  margin: 10px 0;
  width: 300px;
  height: 300px;
}

看到他们在工作：https://jsfiddle.net/mcgnyfw9/

问候，

Answer 2

这真的与 Django 或 Bootstrap 无关。您需要将图像设置为.image 上的背景，以便将它们裁剪为正方形。

<div class="image" style="background-image: url(/{{competition.image.url}});" ></div>

还要确保您已应用 CSS 以使用背景图像填充元素：

.card .image {
    background-size: cover;
}

你也可以尝试强制图片拉伸到.image高度的100%并隐藏水平溢出，但是背景的方法更简单。