bootstrap４でレスポンシブな正方形にしたい

bootstrap4を使用して、正方形の画像のリストページを作成したいです。
col-3の横幅に合わせて高さも変わるようにしたく、
また、中のイメージも正方形の枠に合わせて中心から切り取りたい（object-fit: cover;のように）です。

色々組み合わせてしまうとうまくいかないです。
現状、bootstrap4のcssのみ使用して一番理想に近づいています。

理想はインスタのプロフィールページです。

ご教示お願い致します。

Infinite-containerとinfinite-itemはjqueryのものです。（ブロックのサイズとは無関係です）

html
1<div class="container">
2    <div class="row infinite-container">
3        {% for diary in diary_list %}
4            <div class="infinite-item col-3 shadow d-block">
5                <a href="{% url 'diary:diary_detail' diary.pk %}">
6                    {% if diary.photo1 %}
7                        <img src="{{ diary.photo1.url }}" class="img-fluid"/>
8                    {% endif %}
9                </a>
10            </div>
11            {% empty %}
12            <p>日記がありません。</p>
13        {% endfor %}
14    </div>
15</div>