HTML・CSS

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

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

どの画像も枠内に収まる「object-fit:contain;」のざっくりコピペ用

HTML

<div class="thum">
  <img src="assets/images/dammy.png" alt="">
</div>

SCSS

.thum{
  max-width: 300px; //好きな幅
  width: 100%;
  height: 200px; //好きな高さ
  border: 1px solid #ccc; //枠線つけたかったら
  img{
    object-fit: contain;
    height: 100%;
    width: 100%;
  }
}

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