Мне нужно сделать квадратный div, содержащий изображение. Трудность, с которой я столкнулся, заключается в том, что я хотел бы, чтобы он был квадратным, без необходимости указывать его размер он должен быть возведен в квадрат пропорционально максимальной ширине, которую он получает от родительского div, ограничиваясь в этом случае col-3. Все образцы, которые я смог найти здесь, не отвечают на мой вопрос.
<div class="col-3 pb-3">
<div > <<<<<<<<<----------- THIS ONE SHOULD BE SQUARE
<img src="/images/{{$photo->filename}}" style="
width:100%;
height:100%;
object-fit: scale-down;">
</div>
<button class="btn btn-primary mb-0" type="button">
Remove
</button>
</div>
Как это можно сделать?