サムネイル画像やイメージスライダーなど、ボックスのサイズや縦横比が決まっていて、画像サイズを合わせたり、中央配置したりしたいときがありますよね。
そんなときに活躍するのが「object-fit」プロパティです。
背景画像でいうところの「background-size: contain / cover」の要領で、簡単に画像をリサイズ・トリミングできます。
これが出る前は「position: absolute」などを使って何とかしていたのですが、めっちゃスマートな方法になりました。
「object-fit」プロパティを使えば、画像の中央配置も簡単です。
object-fitのデモ
簡単なデモを作ってみました。
object-fitプロパティには、幾つかのキーワードが指定できます。
See the Pen object-fit: contain by Takayuki Kojima (@takayuki-kojima) on CodePen.
object-fitはサイズを指定しないと効かない
各値の説明をする前に、超重要な点を。
object-fitは、画像をコンテンツボックスにどうはめ込むかを指定するプロパティです。
よって、ボックスサイズを指定しないと効きません。
<img>（もしくは<video>）のwidthやheightやaspect-ratioを使って幅と高さを必ず指定しましょう。
object-fitの値は5つ
object-fitの値となるキーワードは、5つあります。
img {
object-fit: fill;
object-fit: cover;
object-fit: contain;
object-fit: none;
object-fit: scale-down;
}object-fit: fill
画像はボックス全体を埋めるように拡大縮小されます。
画像とボックスのアスペクト比が一致しない場合は、引き伸ばされます。
ボックスサイズだけ指定したときのデフォルト状態とも言えます。
object-fit: cover
画像のアスペクト比を維持したまま、ボックス全体を埋めるように拡大縮小されます。
アスペクト比が合わない場合は、余った部分が切り取られます。
object-fit: contain
アスペクト比を維持したまま、画像全体がボックス内に収まるように拡大縮小されます。
object-fit: none
画像は拡大も縮小もされません。
後述するobject-positionと併せて使えば、画像のサイズを変えずに指定した部分を切り取って表示する、という使い方もできます。
object-fit: scale-down
画像がボックスより大きい場合はcontainを指定したときと同じように縮小されます。
画像がボックスより小さい場合はnoneと同じになり、拡大はされません。
object-positionで画像の配置を決める
object-fitプロパティを指定すると、デフォルトで画像が中央配置されます。
配置を変える場合には、object-positionプロパティで位置を指定します。
値は%値、数値、キーワード（center, right, left, top, bottom）です。
img {
object-position: 50% 50%;/* デフォルト値。center centerと同じ */
object-position: left top;/* 0 0と同じ */
object-position: right bottom;/* 100% 100%と同じ */
object-position: 40px 80px;
}object-positionで画像をずらす
object-positionでは、ボックスに対して画像の位置をずらすことも可能です。
たとえば下記のように指定した場合、画像サイズはobject-fit: coverなのでボックスをぴったり埋めるサイズになります。
object-position: 40px -40pxなので、左から40px、上方向に40px、画像が動きます。
結果、左と下に空白ができ、右上にはみ出した部分は切り取られます。
img {
object-fit: cover;
object-position: 40px -40px;
}object-fit: noneを使ってトリミング
下記のコードでは、object-fit: noneなので画像は元のサイズのまま、100px×100pxの枠に合わせて切り取られます。
デフォルトでは中央配置ですが、下記のようにobject-positionで上下左右に画像の位置をずらせるので、実質的に好きな部分をトリミングすることができるわけです。
img {
width: 100px;
height: 100px;
object-fit: none;
object-position: -20px -40px;
}まとめ
object-fitを使えば画像のトリミングも中央配置もなんてことありませんね。
ボックスサイズに依存するプロパティなので、width/height（aspect-ratio）が必須ってとこだけ忘れないようにしましょう。
コメント