Weblasts

object-fitで縦横比率がおかしい画像を正方形にしてレスポンシブ化

タイトルの通り比率が同じではない長方形の画像を縦横比率を保ったまま正方形(正円も含む)にして可変させたいという迷える子羊がいたので作ってみましたが、ifreamの埋め込みなんかの応用でうまくいきますので参考にどうぞ

簡単にやり方

可変させたい画像はブロックレベルのタグで囲んで二重構造にしておきます フルードイメージの考え方に似ているのでよくこの構造は使うと思います

とりあえず組んでみるとこのような形に組めると思います。
例ではdivを使っていますが使い方さえ合っていれば、figureでもpでもブロックの要素なら何でもいいです

まずは囲っている親要素から
positionプロパティを使って重ね合わせる準備をしたり、高さをpaddingでとったりheightを消したり複雑ですが一つ一つはよく使うプロパティになっていると思います。

今回は幅と高さを同一にしたいので幅50%、padding-top:50%で高さを出すようにしています。
youtubeを可変するように埋め込むときに親要素の幅100%で上か下にpaddingを56.25%付けますが考え方は同じで、youtubeは16:9なので中途半端な値になっていますが、今回は正方形なので1:1で幅に指定したものと同じ値でpaddingをとってあげればOKです。

正円にしたいならborder-radiusを付けますがoverflowを指定しないとおかしな表示になるので角丸の指定をするならセットでどうぞ

中のimg要素は幅・高さとも100%にしてpositionプロパティをabsoluteと指定します。
親要素の左上に位置を指定して、object-fitプロパティを使って縦横比率が崩れないようにしておきましょう

object-fitプロパティ

置換要素を、コンテナーにどのようにはめ込むかを設定します。
言い回しが難しいのでかみ砕くと、img要素に高さと幅を決めてトリミングしたように表示できるプロパティです

ここで使ったcoverという値はimgのアスペクト比を維持したまま、指定した幅と高さ全体を埋めるように拡大縮小されます。
imgのアスペクト比がボックスのアスペクト比と合わない場合は、imgの方が合うように切り取られます。