【WordPress】アイキャッチやサムネイルの画像が縦横に伸びないようにする

2018年3月2日

ワードプレスでブログを運営していると、アイキャッチ画像や関連記事のサムネイルなど、小さく表示させた画像が縦や横に伸びて崩れてしまうことがある。

自動で切り抜いて画像が伸びないように表示させるには、以下のようにCSSスタイルシートで整えることで解決。

.thumbnail img {object-fit: cover;}

これでサムネイルの枠が長方形だったり正方形・丸だったり、枠の形が画像のサイズと違うときにも強制的に枠のサイズに引っ張られることなく画像が伸びない。

画像の中心から枠の幅だけトリミングされたように綺麗に表示されるが、切り取っているわけではなくはみ出した部分を表示しないように自動で調整してくれる。

その代わりに、画像の端っこが切れてしまったりもするので場合によっては縦横に伸ばしてでも画像全体を入れた方がいいかもしれない。個人的には画像の縦横比はそのまま綺麗に表示されている方が見やすいし好きだけど。