アスペクト比が違う画像を全て同じ比率で表示させる

マークアップ言語

サイトで利用する画像は全てサイズをキッチリ同じに揃えている几帳面な方やむしろそうしないと気が済まない潔癖症な方には無縁の悩みかと思いますが、私を含めてそうでない方は画像のサイズ（と言うかアスペクト比）が不揃いなせいでレイアウトが微妙にズレたり気に入らなかったりする場合があるんじゃないでしょうか。

主にPixabayなどからダウンロードしたフリー素材や自分で撮影したスクリーンショットをリサイズしないでそのまま使用しているとそういう事になっちゃうわけですが、当エントリーではCSSで簡単にそのアスペクト比を設定する方法を書いてみたいと思います。

aspect-ratioがすばらっ！

いいですよねこれ、こういうのが欲しかったんですよ。もうpadding-topとか確かに結果的にはそうなるけど本来そういう使い方じゃないでしょーみたいなハックを使わなくてもいいのが嬉しいです。

私としてはもう完全に切り捨てているのでノープロブレムですが、IEは非対応なのでその点はご注意ください。Safariはどうだったかなという感じですがそっちもまぁ別にいいかーみたいな。

それでも気になる方はこちらもチェックしておいてくださいね？

アイキャッチのアスペクト比を16:9にするサンプル

ヘタな説明より実際に見ていただいた方が早いでしょうという事で、WordPressを例にしてアイキャッチのアスペクト比を16:9にするサンプルを用意しました。画像は添付していませんので追加CSSにでも貼り付けてちゃちゃっとお試しください。

とりあえず無難？なセレクトかどうかはともかくとしてCocoon・Luxeritas・Lightning・Arkhe用とありますが、ぶっちゃけクラス名以外はまんま同じなのでいくらでも応用は効くと思われます。

もし画像が小さかったりしてカラム幅いっぱいにならない場合は以下の文も追加してみてください。

width: 100%;

for Cocoon

自作のデモサイトで確認済みです。

.eye-catch img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

for Luxeritas

これは当サイトでも適用しています。

#post-thumbnail img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

for Lightning

テスト用サイトで確認しました。

.veu_autoEyeCatchBox img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

for Arkhe

自作のデモサイトで確認済みです。公開は5.8のせいで様子見中…という事にしてください。

.p-entry__thumb__img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

グリッドの高さを揃えたりも出来ます

いわゆるMasonryっぽい感じにしたい場合は別として、キレイに画像やコンテンツを並べたい場合にもこのaspect-ratioは応用出来るので気になっていた方はガンガン活用してみるといいんじゃないでしょうか。

それにしてもIEを気にしなくていいと割り切ってしまうとホント色々な面で楽になりますねぇ…ちょっとまた色々とイジるのが楽しくなってきたような気がします。

マークアップ言語CSS