アイキャッチ画像のアスペクト比（縦横比）をCSSで一括で調整

2021.05.18

アイキャッチ画像のアスペクト比がバラバラだったので統一したい。

CSSで、すべての記事のアイキャッチ画像を一括調整。

.eye-catch {
  width: 100%;
  height:0;
  padding-bottom: 62%;
  overflow:hidden;
}

.eye-catch img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

こいつを追記すればOK。

padding-bottom: 62%;

この数字を変えれば、画像の縦の長さを変更できるので、好きな縦横比に変更できます。

画像は「リサイズ超簡単!Pro」でリサイズしてから登録する

画像はローカルでリサイズしてからアップした方が良いですね。

無駄に大きな画像はサーバーに優しくない。

「リサイズ超簡単!Pro」でリサイズしてから、登録しています。