「object-fit」で画像の表示を調整する

object-fitはimgにwidthやheightを指定して、画像を指定したサイズに合わせて表示の調整できる超便利プロパティ!
なんとなく使っていたけどよく忘れるのでメモ。

ただひとつ注意なのが、IE11には対応していない。
参照:Can I use object-fit ?
(・・・もう良いよね??)

object-fitのプロパティ設定

/* 要素のコンテンツボックスに収まるように拡大縮小して中央揃え */
object-fit: contain;

/* 要素のコンテンツボックス全体を埋めるようにトリミングして表示 */
object-fit: cover;

/* 画像が伸びて要素のコンテンツボックスのサイズに合わせる */
object-fit: fill;

/* 拡大縮小せずそのままのサイズ */
object-fit: none;

/* 要素のコンテンツボックスより画像が大きい場合はcontain、小さい場合はnoneが適用される */
object-fit: scale-down;

「object-position」で画像の位置を指定

/* 指定方法 %・px・top・center が使える*/
object-position: 横の位置 縦の位置;

/* 初期値 */
object-position: 50% 50%;

ABOUT US

yukipan
Web制作会社で働いてます。パンダとかリラックマとか、まあるいものが好き。好奇心旺盛で、何にでも興味をもってしまう。とりあえずやってみてから取捨選択するのがモットー。今はグリーンカレーとチャイと株式投資がブーム。