今回はobject-fitとobject-positionを使って画像や動画の縦横比を維持しながら任意の大きさに画像を調節する方法を紹介します。

object-fit プロパティ

object-fitプロパティは置換要素の内容を、ボックスにどのようにはめ込むか指定できます。値は以下の5つです。

fill（初期値）

指定サイズのコンテンツボックス全体を埋めるサイズになる（縦横比は維持しない）

contain

縦横比を維持したまま、指定サイズのコンテンツボックに収まるようにリサイズされる。

縦横のうち大きい方のサイズに合わせてボックスに合わせる。

cover

縦横比を維持したまま、指定サイズのコンテンツボックスを覆うようにリサイズされる。

縦横のうち、小さい方を基準にして自動的にリサイズし、はみだした部分はトリミングさ

れる。

none

リサイズせず、指定サイズのコンテンツボックス内を画像そのままのサイズで埋める

scale-down

noneまたはcontainを指定したかのようにサイズが決められ、実際のサイズが小さい方が

採用される。

今回使う元画像（neko.jpg）はこれです。

imgタグのidをsample1,sample2,…,sample5とし、それぞれの値でobject-fitプロパティを適用させていきます。

<div class="box">
   <img id="sample1" src="neko.jpg">
   object-fit: fill
</div>
<div class="box">
   <img id="sample2" src="neko.jpg">
   object-fit: contain
</div>
<div class="box">
   <img id="sample3" src="neko.jpg"> 
   object-fit: cover
</div>
<div class="box">
   <img id="sample4" src="neko.jpg">
   object-fit: none
</div>
<div class="box">
   <img id="sample5" src="neko.jpg">
   object-fit: scale-down
</div>

CSSはこちらです。

/*大きさは300×300、枠線付き*/
img {
  width: 300px;
  height: 300px;
  border: 2px solid #888;
}

/*object-fitプロパティ*/
#sample1 { object-fit: fill; }
#sample2 { object-fit: contain; }
#sample3 { object-fit: cover; }
#sample4 { object-fit: none; }
#sample5 { object-fit: scale-down; }

このような感じでトリミングされます。

See the Pen pKYVqd by Nishimura Shiori (@shtg11) on CodePen.0

上ではflexboxを使ってレスポンシブ対応しています。

object-positionプロパティ

object-fit: cover;で画像の縦横比を維持したまま画像の中央でトリミングしていましたが、中央以外でトリミングしたいときはobject-positionを使用します。object-positionは画像の左上を基準にして縦の位置、横の位置を指定していきます。

leftやcenter、rightで指定するほかに、パーセント指定やpx指定など値の指定方法は様々です。

HTMLは以下の通りです。

<div class="box">
   <img id="sample1" src="neko.jpg">
   object-position: left
</div>
<div class="box">
   <img id="sample2" src="neko.jpg">
   object-position: center
</div>
<div class="box">
   <img id="sample3" src="neko.jpg">
   object-position: right
</div>
<div class="box">
   <img id="sample4" src="neko.jpg">
   object-position: 100px 50px
</div>
<div class="box">
   <img id="sample5" src="neko.jpg">
   object-position: 70% 100%
</div>

CSSは以下のように指定しています。

/*大きさは300×300、枠線付き*/
img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border: 2px solid #888;
}

#sample1 { object-position: left; }
#sample2 { object-position: center; }
#sample3 { object-position: right; }
#sample4 { object-position: 100px 50px; }
#sample5 { object-position: 70% 100%; }

実行結果は以下の通りです。
先程と同様、flexboxを用いてレスポンシブ対応しています。

See the Pen zabazQ by Nssh (@shtg11) on CodePen.0

今回は、object-fitとobjecct-positionを使用し、画像や動画をサイズを調整する方法を紹介しました。
ぜひ、参考にしてください。