こんにちは、ゆんつです。
大きさや縦横比が全くバラバラの画像がここにあります。
1:1（横120px縦120px）
3:2 (横180px縦120px)
4:3 (横240px×縦180px)
この画像を横並びにすると以下のような感じになります。
See the Pen yLJGjbj by konpure (@yuntu) on CodePen.
このように大きさや縦横比が違う画像を、画像の編集などをせずに同じサイズで並べたい場合。
CSSのobject-fitというプロパティを使うと、簡単に縮尺を保ったまま同じサイズで並べることができます。
サイズや縦横比がバラバラのサイズの画像を同じ大きさで並べたりするときにとても便利です。
今日はCSSのobject-fitについて書きたいと思います。
object-fit
object-fitは<img>や<video>に設定されたwidthやheightに対して、どのように画像などを表示するかを設定するプロパティです。
使用できる値について、以下に実例を示しながら見ていきたいと思います。
ちなみにimgタグにはwidth、heightともに150pxを設定しています。
fill
画像の縦横比を無視し、設定した幅と高さに画像をフィットさせます。
See the Pen object-fill by konpure (@yuntu) on CodePen.
一見違和感が無いように見えますが、画像の縦横比を無視してimgタグに設定した幅と高さに画像を合わせているので良くみると元の画像と感じが違うのが解ると思います。
contain
画像の縦横比は保ったまま、設定した幅や高さのいずれか大きい方と一致するように画像を表示します。
See the Pen object-contain by konpure (@yuntu) on CodePen.
見てもらうとわかるように画像の縦横比を保ったまま、設定した幅に合わせて画像が表示されています。
柴犬とカワウソの画像については、imgに設定したwidhtとheightの比率と画像の縦横比が合っていないので、その分だけ余白が表示されているのもわかると思います。
cover
画像の縦横比を変えずに、設定したwidthやheightいっぱいに画像を表示します。
See the Pen object-cover by konpure (@yuntu) on CodePen.
widthやheightで作成した表示スペースからはみ出る部分はトリミングされて表示されません。
見ていただくとわかるように、画像の縦横比を変えていないので動物の顔はゆがんだりせずに画像の通りです。
縦横比が合わずにはみ出した部分はトリミングされています。
犬とカワウソの画像を、containの時の画像と比較してみると背景部分がトリミングされていることがわかると思います。
たぶん、これが一番使う値だと思います。
none
設定したwidthとheightの中央に画像が配置され、設定したwidthやheightからはみ出した画像部分はトリミングされます。
See the Pen object-none by konpure (@yuntu) on CodePen.
設定したwidthやheightよりも画像が小さい場合でもリサイズはされません。
見ていただくとわかるように猫の画像は画像のサイズが横120px縦120pxで、imgのwidthは150pxとheightは150pxなので、画像は設定したwidhtとheightの中央に表示されリサイズされずに周囲に余白があることが分かります。
そして犬の画像も縦120pxなので余白があります。
画像に表示枠をのっけて、はみ出た部分はトリミング、余白があってもそのままという風にイメージすると良いかもしれません。
scale-down
設定した表示枠よりも画像のサイズが大きい場合は「contain」が適用され、表示枠よりも画像が小さい場合は「none」が適用されます。
See the Pen object-scaledown by konpure (@yuntu) on CodePen.
見ていただくとわかるように設定した表示枠よりも画像が小さい猫はnone
表示枠よりも画像が大きい犬とカワウソはcontainが適用されています。
表示部分を自分で設定したい
object-fitで値にcoverを指定して画像がトリミングされる場合。
デフォルトの状態では画像の中心を基準にして、はみ出た部分のトリミングが行われます。
でも画像の中心ではなく端っこを表示したい場合などもあるはずです。
例えば以下のような画像の場合にobject-fitで値にcoverを指定した場合。
左下の建物がトリミングにより切り取られてしまします。
See the Pen jOrdbBb by konpure (@yuntu) on CodePen.
このような場合、object-positionによりトリミングの基準点を変更することができます。
設定方法は
object-position: 横位置 縦位置;
です。
位置の指定はpxでも%でも良いです。
何も設定しない場合のobject-positionは50% 50%で中央が基準になっているので、例えば先ほどの画像で左下を基準（object-position: 0% 100%）にすると
See the Pen object-position-b by konpure (@yuntu) on CodePen.
トリミングの基準点が変わり、きちんと画像の左下の建物は表示されます。
object-positionを使うことで、画像のどの部分を表示したいかの調整をすることができます。
とっても便利！
CSSのobject-fitについて見てきました。
いろんな値がありましたが、縦横比を変えずに設定した表示スペースいっぱいに画像を表示してくれるcoverは本当に便利です。
もし素材の画像の大きさや縦横比がバラバラだった場合。
object-fitを使うことで、簡単にバランスよく画像の表示ができるのではないかと思います。
