【CSS】異なるサイズの画像をサイズを揃えてキレイに配置する方法

CMSを使用した記事の一覧ページでサムネイル画像とタイトル等を並べて表示させることがあります。

複数人で記事を更新する場合など、ユーザーによってはトリミングする環境がなくスマホで撮った画像をそのままサムネイルに指定したり、サイズが異なる画像が配置され、レイアウトが崩れてしまうことがあります、、

異なったサイズの画像がサムネイルに指定されても、縦横比を維持し、表示サイズを揃えて表示させる方法です。

1.実装サンプル

横に4記事並べる場合のサンプルです。

HTML

<ul class="blogList">
 <li>
  <a href="">
    <figure class="pic">
      <img src="https://placehold.jp/750x536.png">
    </figure>
    <div>
      <time>2021.06.22</time>
      <h1 class="title">タイトルタイトル...</h1>
    </div>
   </a>
 </li>
 <li>
  <a href="">
    <figure class="pic">
      <img src="https://placehold.jp/1000x2000.png">
    </figure>
    <div>
      <time>2021.06.18</time>
      <h1 class="title">タイトルタイトル</h1>
    </div>
   </a>
 </li>
 ～～～ (省略) ～～～
</ul>

CSS

1.flexboxを使用し、横並びにします。

.blogList {
   display: flex;
   flex-wrap: wrap;/*4記事以上ある場合、折り返しできるように指定*/
   gap: 60px 1.4%;
}
.blogList li {
   width: 23.95%;
}

2.画像の縦横比を保つため、画像の親要素にpadding-topを指定。
（画像の比率を16:9にしたので、9 / 16 × 100=56.25%）

.blogList li figure {
   overflow: hidden;
   padding-top: 56.25%; /* 画像の高さを幅の56.25%に固定する */
}
.blogList li figure img {
   width: 100%;
}

通常の設定だと、画像の高さがバラバラなので、見た目が良くないですね。

3.imgにheight: 100%;を指定し、高さを揃え、positionとtranslateを使って画像を中央に配置します。

.blogList li figure {
   position: relative;
   overflow: hidden;
   padding-top: 60%;
}
.blogList li figure img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 100%;
   height: 100%;
}

高さは揃いましたが、画像が引き延ばされてしまいました。

4.object-fit: cover;を指定。
object-fit: coverは、縦横比を維持したまま、要素のコンテンツ内を埋めるよう、サイズを調整してくれます。

.blogList li figure img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 100%;
   height: 100%;
   object-fit: cover;
}

キレイに配置されました！

画像の表示位置を変更したい場合は、imgに「object-position 」を指定します。初期値は、object-position: 50% 50% でセンター配置となっています。

2.object-fitのブラウザサポート状況

IE以外のブラウザでサポートされています。
（2021年6月22日現在）

▼object-fitのブラウザサポート状況 | Can I use
https://caniuse.com/object-fit

3.参考サイト

こちらの記事を参考にさせていただきました。
▼object-fit | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit