【CSS】縦横比を保ったままレスポンシブで画像を正方形にする。

<div class="box-container">
    <div class="box">
        <img src="/img.jpg">
    </div>
    <div class="box">
        <img src="/img.jpg">
    </div>
    <div class="box">
        <img src="/img.jpg">
    </div>
</div>

.box-container{
    display: flex;
    justify-content: space-between;
}
.box{
    width: 30%;
    background: #eee;
    position: relative;
    overflow: hidden;
}
.box::before{
    content: "";
    padding-top: 100%;
    display: block;
}
.box img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}