html 图片正方形,关于CSS：如何使图像显示为正方形？

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

还记得Instagram如何仅显示方形图像作为缩略图吗？我想实现这一目标。我进行了一些研究，并尝试了其他人写下的一堆东西，但是唯一可以做到这一点的是：

https://stackoverflow.com/a/23518465/1067213

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

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

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

这是我的html：

{% if competition_list %}

{% for competition in competition_list %}

           

{{competition.name}}

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

View details ?

{% endfor %}

{% else %}

No competitions in this category, please try an other category

{% endif %}

这是我的CSS：

.card {

margin-bottom: 10px;

}

.image{

position:relative;

overflow:hidden;

padding-bottom:100%;

}

.image img{

position:absolute;

}

理想的结果如下所示：

让我知道您是否需要更多信息。

提前致谢！

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

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

.card .image {

background-size: cover;

}

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

仅添加您在此处提供的CSS不会显示任何内容。 但有了CSS，我已经可以正常使用了。 我确实有一个问题。 这种作物到中心了吗？

要使图像居中，请使用以下命令：background-position: center center;

非常感谢你！ 这很简单，很直接！

您可以使用包装器来播放width，max-width和min-height：

 

 

您将宽度设置为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：覆盖并以background-position播放。

// CSS

.use-cover-background {

background-size: cover;

background-position: center;

}

.square {

margin: 10px 0;

width: 300px;

height: 300px;

}

看到他们正常工作：https：//jsfiddle.net/mcgnyfw9/

问候，