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

Question

最近我一直在尝试使用Bootstrap 4 alpha版本创建项目，经过多次尝试后，我无法使上传的不同大小的图像在显示时呈现为正方形。

还记得Instagram只显示正方形缩略图吗？我想实现这个效果。我已经做了一些研究，并尝试了其他人写下的许多方法，但唯一接近该效果的是这个网址：https://dev59.com/AmAg5IYBdhLWcg3wm7_6#23518465

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

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

我使用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;
}

理想的结果应该看起来像这样：

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

提前感谢！

- Tony

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

已添加了top、left和transform属性，使图像垂直居中。

您还可以使用background-size: cover并尝试调整background-position。

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

祝好，

- cnexans

---

这个答案帮助我实现了我想要的。谢谢！ - Olawale Oladiran

Answer 2

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

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

同时确保已经应用了CSS来填充该元素的背景图片：

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

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

- isherwood

---

仅仅添加你提供的CSS并不会显示任何内容。但是使用我已经有的CSS，它确实可以工作。不过我有一个问题，这个是否能够居中裁剪？ - Tony

要使图像居中，使用以下代码：background-position: center center; - isherwood

非常感谢！这很简单明了，直截了当！ - Tony