htmlとcssで写真を正方形のグリッド状に表示したい。

Question

こんちは。

htmlとcssで写真を正方形のグリッド状に表示したいです。
現状だと、いろいろな形の写真がまざっているため、整列はしているものの、ちょっと雑然としている感じです。そこで、各写真の大きさを正方形に揃えたいのですが、ここで詰まってしまいました。

コードは、

    <section class="post-list">
        @foreach($user->tests as $test)
        <a href="" class="post">
            <figure class="post-image">
                @if($test->image == null)
                <img src="/storage/image/no_image.png" alt="{{$test->name}}">
                @else
                <img src="/storage/image/{{$test->image}}" alt="{{$test->name}}">
                @endif
            </figure>
            <div class="post-overlay">
                <p>
                    <span class="post-likes"><i class="fa fa-heart" aria-hidden="true"></i> 150</span>
                    <span class="post-comments"><i class="fa fa-comment" aria-hidden="true"></i> 10</span>
                </p>
            </div>
        </a>
        @endforeach
    </section>

.post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 293px));
  justify-content: center;
  grid-gap: 28px;
  padding-top: 110px;
}

.post {
  cursor: pointer;
  position: relative;
  display: block;
}
.post-image {
  margin: 0;
}
.post-image img {
  width: 100%;
  vertical-align: top;
}

です。cssの.post-image imgに

    width: 250px;
    height: 250px;
    object-fit: cover;

を加えたのですが、そうすると画面幅を縮めていったときに最終的に画像が重なってしまいます。できればグリッドを保ちつつ、かつ正方形であってほしいです。

よければアドバイスいただけないでしょうか。
よろしくお願いいたします。

Answer 1

.post-image {
  margin: 0;
  padding-top: 100%; /* 余白の高さが幅と等しくなり、余白部分は正方形になる。*/
  position: relative;
}
.post-image img {
  position: absolute; /* 通常フローからはずれ浮いた状態になる */
  top: 0;             /* .post-image の上端に配置 */
  width: 100%;
  height: 100%;       /* .post-image と同じにすることで正方形になる */ 
  vertical-align: top;
  object-fit: cover;  /* トリミング */
}

注意点
object-fit はIEは非対応です。

---

もう IE はスルーしてもいいと思いますが、対応させたいなら、画像をimgタグではなくCSSの背景として表示させればいいでしょう。

   <figure class="post-image" style="background:url(/storage/image/{{$test->image}}) center/cover;">
     </figure>

Comments

[toyop]

hatena19さん
ご回答ありがとうございました。
無事実現することができました。思っていたよりも手順が複雑だったので、ひとつひとつ自分で理解していきます。
ありがとうございました！