画像の縦幅比率を変えずにCSSを使ってリサイズする方法について、ずっと模索していたのですがやっと解決策に辿り着いたのでまとめておくことにしました。
まとめておくといっても、CSSたった1行だけで解決できる問題だったので簡単なメモというか備忘録です。
「width」と「height」の設定だけでは画像比率が崩れる
WordPressでサイトを作成する時にアイキャッチ画像（ブログ記事の一番上に表示されるサムネイル）をCSSで一括で縦幅を300px程度に調整をできないかとずっと方法を探していました。
まず試してみたのが「width」と「height」で幅と高さを指定するという方法です。しかし、これだけだと画像の比率が保たれずに、画像が伸びたり縮んだりしてしまいます。「max-width」や「height: auto;」を試したみたのですが無理でした。
そのため、諦めて画像をアップロードする前に指定のサイズにリサイズして使用していました。
「object-fit」を使えば縦横比率を保ったまま画像をリサイズできる
昨日「CSSでの画像のリサイズ」についてふと思い出して調べていたら、「object-fit」という画像リサイズの問題を全てを解決するプロパティを見つけました。
おそらくWebデザイナーやフロントエンドエンジニアにとっては常識のような知識かもしれませんが、「比率を保って」「比率を変えずに」というキーワードが出るまでに時間がかかりした。
「object-fit」の使い方
ここから本題ですが画像のリサイズ問題は「object-fit」というプロパティ1つで解決できます。
「object-fit」は、画像や動画などの要素をボックスにフィットさせるCSSのプロパティです。
「object-fit」の具体的な使い方についてですが、リサイズしたい要素に「object-fit: cover;」を追加します。
当サイトのアイキャッチ画像のサイズ調整を例にすると、以下のようになります。
img.centered, .aligncenter, .singular-image {
object-fit: cover;
height: 300px;
}当サイトの記事上のアイキャッチ画像のclassが「img.centered, .aligncenter, .singular-image」なので、この画像の要素に「object-fit: cover;」と画像の高さ（heght）を指定しています。
自身のサイトで使用する場合には、該当の要素のclassに「object-fit: cover;」を指定してみて下さい。
今回は横幅は記事の幅で変更しなくて良かったので、「width」は指定していませんが必要があれば横幅も指定できます。横幅をすると全体的にサイズを変更できます。
さいごに
以上、CSSだけで縦横比率を変えずに画像をリサイズする方法でした。リサイズといっても「object-fit: cover;」を足すだけなので、内容は以上です。参考になれば幸いです。
WordPressをカスタマイズするのが趣味なので、また役に立ちそうなプロパティを見つけたらまとめておきます。