Как сделать изображения отображаться как квадрат? ⇐ CSS

[Anonymous]

Я в последнее время играл с версией Bootstrap 4 Alpha, чтобы создать проект, и после многих попыток я не могу сделать загруженные изображения различных размеров, отображаемые в виде квадрата, когда я их отображаю. < /p>

Помните, как Instagram отображал только квадратные изображения для миниатюр? Я хочу достичь этого. Я провел некоторое исследование и попробовал кучу вещей, записанных другими людьми, но единственное, что было достаточно близко к этому:
https://stackoverflow.com/a/23518465/1067213

Но результат не то, что я на самом деле хочу, чтобы это сделать:

{{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 %}

< /code>

Вот мой css: < /p>

.card {
margin-bottom: 10px;
}

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

Идеальный результат будет выглядеть немного похоже на это: < /p>


дайте мне знать, если вам нужно больше информации.

Подробнее здесь: https://stackoverflow.com/questions/426 ... s-a-square