【CSS】角丸画像のトリミングはobject-fitで一行解決！

「画像を角丸でトリミングしたい」「縦横比がバラバラでも枠いっぱいに綺麗に切り抜きたい」。そんなときは object-fit: cover; を画像自身に指定するだけで解決できます。枠（幅・高さ・角丸）を先に決め、画像は「はみ出してもよいから枠にフィット」させるのがコツです。

基本：一行で“いい感じのトリミング”を実現

<img class="thumb" src="landscape.jpg" alt="">

.thumb{
  width: 320px;
  height: 200px;
  border-radius: 12px;
  object-fit: cover;   /* はみ出しOKで枠に合わせて切り抜く */
  object-position: 50% 50%; /* 中心基準（省略可） */
  display: block;      /* インライン隙間対策（任意） */
}

画像要素に固定の枠（幅・高さ）と角丸を与え、object-fit: cover; を指定すると、枠からはみ出した部分が自動的にトリミングされます。中央を見せたいなら object-position を併用します。

正方形のアバターを丸くトリミング

<img class="avatar" src="user.jpg" alt="">

.avatar{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

直径だけ指定して border-radius: 50%; にすれば、どんな比率の画像でも綺麗な円形アバターになります。

レスポンシブ対応：aspect-ratioで高さも自動

<img class="card-media" src="photo.jpg" alt="">

.card-media{
  width: 100%;
  aspect-ratio: 16 / 9; /* 枠の比率だけ指定 */
  border-radius: 12px;
  object-fit: cover;
}

aspect-ratio を使うと、高さを固定せず比率だけ決められます。カード幅に応じて高さが自動調整され、常に綺麗なトリミングが保たれます。

グリッド一覧でも破綻しないカードサムネイル

<ul class="grid">
  <li><img class="grid-img" src="1.jpg" alt=""></li>
  <li><img class="grid-img" src="2.jpg" alt=""></li>
  <li><img class="grid-img" src="3.jpg" alt=""></li>
</ul>

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
  gap: 16px;
}
.grid-img{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
}

画像の縦横比が混在しても、すべて同じ枠に揃ってカードレイアウトが崩れません。

よくある“効かない”原因と対処

画像に高さがないと「はみ出し」という概念が生まれません。幅だけ指定している場合は高さ（もしくは aspect-ratio）も与えます。角丸をラッパーに付けるなら、ラッパー側に overflow: hidden; を指定します。background-image に対しては object-fit は効きません。背景画像は background-size: cover; を使います。

/* ラッパーに角丸を付ける場合の例 */
.thumb-wrap{
  border-radius: 12px;
  overflow: hidden;     /* 角丸から画像がはみ出さない */
}
.thumb-wrap > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 背景画像の場合は object-fit ではなく background-size */
.hero{
  background: url(hero.jpg) center/cover no-repeat;
  border-radius: 16px;
}

微調整：見せたい位置を指定

.thumb--top{
  object-fit: cover;
  object-position: 50% 10%; /* 上寄せでトリミング */
}
.thumb--left{
  object-fit: cover;
  object-position: 20% 50%; /* 左寄せ */
}

被写体が中央にいない写真でも、object-position で見せたい領域を簡単にコントロールできます。

動画・iframeにも同じ感覚で適用

<video class="media" src="movie.mp4" autoplay muted loop></video>

.media{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  object-fit: cover;
}

<video> でも同じ指定で枠いっぱいに見せられます。外側に角丸を付ける場合は必要に応じて overflow: hidden; を使います。

まとめ：角丸トリミングの最小レシピ

img.rounded-cover{
  width: 100%;
  aspect-ratio: 1 / 1;  /* 好きな比率に変更 */
  border-radius: 12px;  /* 角丸や円形は 50% */
  object-fit: cover;    /* 枠基準でトリミング */
  display: block;
}

枠のサイズと角丸を決めて object-fit: cover; を一行添えるだけで、面倒だった画像トリミングはほぼ解決します。比率は aspect-ratio、見せたい位置は object-position で調整すれば、デザイン要件にも柔軟に対応できます。