object-fitで縦横比率がおかしい画像を正方形にしてレスポンシブ化
タイトルの通り比率が同じではない長方形の画像を縦横比率を保ったまま正方形（正円も含む）にして可変させたいという迷える子羊がいたので作ってみましたが、ifreamの埋め込みなんかの応用でうまくいきますので参考にどうぞ
簡単にやり方
可変させたい画像はブロックレベルのタグで囲んで二重構造にしておきます フルードイメージの考え方に似ているのでよくこの構造は使うと思います
とりあえず組んでみるとこのような形に組めると思います。
例ではdivを使っていますが使い方さえ合っていれば、figureでもpでもブロックの要素なら何でもいいです
|
1 2 3 |
<div> <img src="○○.jpg" alt=""> </div> |
まずは囲っている親要素から
positionプロパティを使って重ね合わせる準備をしたり、高さをpaddingでとったりheightを消したり複雑ですが一つ一つはよく使うプロパティになっていると思います。
今回は幅と高さを同一にしたいので幅50%、padding-top:50%で高さを出すようにしています。
youtubeを可変するように埋め込むときに親要素の幅100%で上か下にpaddingを56.25%付けますが考え方は同じで、youtubeは16:9なので中途半端な値になっていますが、今回は正方形なので1:1で幅に指定したものと同じ値でpaddingをとってあげればOKです。
正円にしたいならborder-radiusを付けますがoverflowを指定しないとおかしな表示になるので角丸の指定をするならセットでどうぞ
|
1 2 3 4 5 6 7 8 |
div { width: 50%;/*上下のpaddingと同じにする*/ height: 0; padding-top: 50%;/*widthと同じにする*/ position: relative; border-radius: 50%; overflow: hidden; } |
中のimg要素は幅・高さとも100%にしてpositionプロパティをabsoluteと指定します。
親要素の左上に位置を指定して、object-fitプロパティを使って縦横比率が崩れないようにしておきましょう
|
1 2 3 4 5 6 7 8 |
div img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } |
置換要素を、コンテナーにどのようにはめ込むかを設定します。
言い回しが難しいのでかみ砕くと、img要素に高さと幅を決めてトリミングしたように表示できるプロパティです
ここで使ったcoverという値はimgのアスペクト比を維持したまま、指定した幅と高さ全体を埋めるように拡大縮小されます。
imgのアスペクト比がボックスのアスペクト比と合わない場合は、imgの方が合うように切り取られます。
