【CSS】画像の縦横比を崩さずにトリミング表示する方法【object-fitの使い方】

画像をWebサイトに配置したとき、「縦横比はそのままにしたいけれど、枠からはみ出す部分は切り取りたい」という場面はよくあります。たとえば、サムネイル画像を同じ大きさで並べたいときや、カードデザインを整えたいときです。こうしたときに便利なのが、CSSのobject-fitです。

object-fitを使うと、画像そのものの比率を崩さずに、指定した枠に合わせて表示方法を調整できます。この記事では、基本的な使い方から、実際によく使うcoverの挙動、あわせて知っておきたい注意点まで、初心者向けに分かりやすく解説します。

object-fitでできること

object-fitは、imgやvideoなどの「置換要素」に対して使えるCSSプロパティです。画像を枠いっぱいに広げつつ、縦横比を維持したまま表示方法を変えられます。

特に、枠のサイズを固定しているのに画像の大きさがバラバラな場合に効果的です。何も指定しないと、画像は元のサイズや親要素との関係で表示されるため、見た目がそろわないことがあります。object-fitを使うと、見栄えを整えやすくなります。

基本の使い方

まずは、幅と高さを指定した枠の中に画像を入れ、object-fit: cover;でトリミング表示する例です。

<div class="thumb">
  <img src="image.jpg" alt="サンプル画像">
</div>

.thumb {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

この例では、親要素の.thumbに固定サイズを指定し、画像にはwidthとheightを両方指定しています。そのうえでobject-fit: cover;を指定すると、画像は枠いっぱいに広がり、はみ出した部分が自動で切り取られます。object-position: center;は、画像の中心を基準に切り抜く指定です。

coverとcontainの違い

object-fitの中でも、よく使うのはcoverとcontainです。

• cover：枠を埋めることを優先し、はみ出した部分を切り取る
• contain：画像全体を収めることを優先し、余白が出ることがある

画像をトリミングして見せたいならcover、画像をすべて見せたいならcontainが向いています。サムネイルやメインビジュアルではcover、ロゴや商品画像のように全体を見せたい場面ではcontainを使うことが多いです。

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

.contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f5f5f5;
}

object-fitを使うときの注意点

object-fitは、画像にwidthとheightの両方が必要です。どちらか一方だけだと、期待どおりに枠へ収まらないことがあります。また、親要素側で表示領域を決めることも大切です。

さらに、切り抜き位置を調整したい場合はobject-positionを使います。たとえば、人物写真で顔が中央に来るようにしたいなら、center topや50% 20%のように調整できます。

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

このようにすると、上寄りの位置を意識したトリミングができます。デザイン上、見せたい部分が切れてしまうときは、object-positionで微調整するとよいでしょう。

よくある実用例

実務では、カード型レイアウトのサムネイルに使うことが多いです。画像サイズが違っても見た目をそろえやすく、レイアウトが崩れにくくなります。

<article class="card">
  <div class="card__image">
    <img src="sample.jpg" alt="記事のサムネイル">
  </div>
  <h3>記事タイトル</h3>
</article>

.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

ここではaspect-ratioを使って、画像枠を横長にしています。object-fit: cover;と組み合わせることで、画像の比率を保ったまま、一覧表示に適したきれいなサムネイルを作れます。

まとめ

画像を縦横比を崩さずにトリミング表示したいなら、object-fit: cover;がとても便利です。親要素で表示領域を決め、画像側にwidthとheightを指定するのが基本です。

また、切り抜き位置を調整したいときはobject-positionを組み合わせると、より見やすい表示にできます。サムネイル、カード一覧、メイン画像など、さまざまな場面で活用しやすいので、ぜひ実際の制作に取り入れてみてください。