【CSS】フレキシブルな画像表示とobject-fit

【CSS】フレキシブルな画像表示とobject-fit

最近のWEB制作はフレキシブル対応が当然になっている。このフレキシブルを簡単に言うと、スマホでもタブレットでもPCでもレイアウトを崩さず表示することだ。

今回はそんなフレキシブルな画像表示についてコードを残しておこう。

See the Pen
flexible-object-fit
by takasuke (@takasuke-sun)
on CodePen.

ポイントはフレキシブルな画像表示とobject-fitの合わせ技だ。

positionを使って画像エリアを浮かし、その表示エリアをアスペクト比(4:3とかそういう画面比率、今回はobject-fitを使わないと歪むように、わざと33%にしている)で設定、最後にobject-fitで歪みをなくしている。

それぞれの解説は他の詳しく紹介しているページに任せよう。

 

また、CodePenでは記述できなかったのだが、object-fitをIE対応するためにはobject-fit-imagesを設定しないといけない。

object-fit-imagesでググれば出てくるので、割愛しよう。

 

最後に自分用にSCSSのコードを残しておく。

コメント

タイトルとURLをコピーしました