項目ブロックの画像をトリミングし表示サイズを統一する方法

項目ブロックはこちら。

タイトル

あいうえおかきくけこ

タイトル

あいうえおかきくけこ

上記のように、項目ブロックは画像をトリミングせずに表示するため、アップロードする画像の画角がバラバラだと表示がガタガタになってしまいます。そこで、CSS を使って画像をトリミングし、各項目の画像の表示サイズを統一する方法をご紹介します。

カスタマイズ方法

CSS

次の CSS をカスタマイザー > 追加 CSS に貼り付けてください。

.smb-items__item__figure {
  position: relative;
  padding: 75% 0 0 0; /* 75% なら 4:3、56.25% なら 16:9 */
  overflow: hidden;
}

.smb-items__item__figure > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%; /* 画像を上下中央揃えしてトリミング */
  height: 100%;
  width: 100%;
}