CSSで画像をトリミングする方法とは？object-fit以外のプロパティも紹介

Webページに画像を使うときに、トリミングしたものを表示させたい場合があるかと思います。

CSSでトリミングできれば、複数の画像のサイズを事前に揃える必要が無くなり、とても便利ですよね。

今回は、画像をCSSでトリミングしたいという方のために、3つのCSSプロパティを紹介します。

この記事を読めば、これらのプロパティを使用して、CSSのみで画像のトリミングができるようになりますよ。

ぜひ最後まで読んでくださいね！

object-fitを使う

最初は、object-fitプロパティを紹介します。

object-fitは、要素のサイズを指定することで、サイズに合わせてトリミングすることができるプロパティです。

以下のように記述します。

img {
  width: 250px;
  height: 250px;
  object-fit: cover; 
}

このコードでは、縦横比を維持したまま、ボックスの中が画像で埋まるようにリサイズされます。

横幅と高さのうち、小さい方のサイズが、指定した250pxに合わせられます。

はみ出した部分はトリミングされ、表示されません。

object-fitで使用できる値は、他にもあります。それぞれ解説していきましょう。

fill（初期値）

fillは、ボックス内を満たすように画像の縦横がリサイズされます。

何も指定していない場合は、この初期値と同じ挙動になります。

cover

上記でも説明したように、縦横比を維持した状態で、ボックスが埋まるようにリサイズされます。

縦横のサイズのうち、小さい方を基準に、拡大・縮小を行います。

中央部分が残り、大きい方はトリミングされます。

レスポンシブ対応させる

レスポンシブ対応させたいときにも、coverは重宝します。

img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

高さを固定し、横幅を100%にすると、親要素の横幅いっぱいに画像が表示されます。

トップページのヘッダー画像などに活用できますね。

object-positionで位置を指定する

中央以外の位置に配置したい場合には、object-positionを指定します。

img {
  width: 250px;
  height: 250px;
  object-fit: cover; 
  object-position : 15% 30%; /* 左からの位置 上からの位置 */
 }

数値は%以外に、pxやemなどでも指定ができます。

以下のように基準位置を指定する方法もあります。

object-position: bottom;

画像が下に寄せられた状態で表示されます。これは、数値で100%としたものと等しくなります。

contain

縦横比を維持した状態で、ボックス内に画像全体が収まるようにリサイズされます。

縦横のサイズのうち、大きい方を基準に、拡大・縮小します。

トリミングはされず、小さい方には余白が表示されます。

img {
  width: 250px;
  height: 250px;
  object-fit: contain;
  border: 2px solid #ccc;
  background: skyblue;
}

上記では、余白部分があることを確認できるように、ボックスに背景色と線を足しています。

none

画像はリサイズされず、オリジナルの大きさのままで表示されます。

ボックスの縦横のサイズに合わせてトリミングされます。

img {
  width: 250px;
  height: 250px;
  object-fit: none;
}

上記では、画像の縦横のサイズが250px以上であれば、余った部分はトリミングされ、小さければ、余白ができます。

scale-down

ボックスよりサイズが大きい画像は「contain」が適用され、小さい画像は「none」が適用されます。

つまり、ボックスより大きい画像の場合、縦横のうち大きい方に合わせてリサイズされます。

小さい場合には、オリジナルの画像がそのまま表示されます。

overflowを使う

親要素にoverflowを指定すると、要素からはみ出た部分の処理の仕方を設定することができます。

はみ出た部分を非表示にする場合には、「overflow: hidden」と記述します。

<div class="box">
  <img src="sample.jpg">
</div>

CSSは、以下のように記述します。

.box {
  position: relative;
  overflow: hidden;
  width: 250px; 
  height: 250px;
}
.box img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

親要素「box」の横幅と高さのサイズを指定しています。

「position: relative」を指定して、子要素のimg要素の位置を中央に配置させます。

img要素では、「position: absolute」と画像の位置を設定しています。

clip-pathを使う

clip-pathを使うと、画像を円や四角だけでなく、五角形やひし形、その他自由な形にトリミングすることができます。

こちらのclip-pathジェネレーターでサンプルが作成できますよ。

CSS clip-path maker

img {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

上記では、星型にトリミングされますね。

safariのブラウザに対応させるため、「-webkit-」を付与したものも記述しています。

多角形を示すpolygon以外にも、以下のような基本シェイプがあります。

複数の実際に記述してみて、色々と試してみてくださいね。

まとめ：トリミング方法に合わせてプロパティを使い分けよう

今回は、CSSを使って画像をトリミングする方法を解説してきました。

object-fitプロパティを中心に、3つのプロパティを紹介しましたね。

画像をどうトリミングしたいのかによって使い分けてみてください。

Webサイトに画像を載せるときに、今回の記事が参考になれば幸いです。