CSSで画像をトリミングする3つの方法【object-fit・background-image・overflow】

CSSで画像をトリミング（切り抜き）する方法はいくつかありますが、その中でも特にシンプルで効果的なのが以下の3つの手法です。

1. object-fit を使う方法

object-fit: cover を使えば、画像のアスペクト比（縦横比）を保ったまま、簡単に画像をトリミングできます。コンテナのサイズに合わせて画像が自動的に拡大縮小され、はみ出した部分が切り取られるため、サムネイルやカード型レイアウトなどで非常に便利です。

さらに object-position プロパティと組み合わせると、表示位置を細かく制御できます。例えば、object-fit を none に設定し、object-position: 50% 50% を指定すると、画像がコンテナの中央に配置されます。最初の数値が左端からの距離（横方向の位置）、2番目の数値が上端からの距離（縦方向の位置）を表しています。

2. background-image を使う方法

画像を表示したい <div> 要素に background-image: url(ここにURLを挿入) を設定します。あわせて background-size を cover に指定すると、アスペクト比を維持したままトリミングされます。なお、background-position の初期値は top left（左上）なので、表示位置を変えたい場合は適宜調整しましょう。

ただし、この方法にはアクセシビリティの面で注意点があります。背景画像はスクリーンリーダーで読み上げられない場合があるため、その画像がサイト全体の目的にとって重要なものである場合は、ページ内に画像の内容を説明するテキストを記載するか、別の方法を選択することをおすすめします。

3. width・height・margin・overflow を使う方法

<img> を囲むコンテナ要素（多くの場合 <div>）に、position: relative と overflow: hidden を設定します。position: relative によって画像に明確な境界線が引かれ、overflow: hidden がその境界からはみ出した部分を隠してくれる仕組みです。あとは margin や width を調整することで、上下左右の好きな方向へ自由に画像を切り抜けます。

以下のコードでは、さまざまなトリミング方法の実装例をまとめて紹介しています。

<!DOCTYPE html>
<html>
 <head>
   <title>Parcel Sandbox</title>
   <meta charset="UTF-8" />
   <style>
     h3 {
       text-align: center;
       margin: 20px;
       padding: 20px;
       border-top: 1px solid black;
     }
     div {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
     }
     div > div {
       max-width: 500px;
       width: 100%;
        align-self: center;
        position: relative;
        overflow: hidden;
     }
     img {
       width: 100%;
     }
      div.crop-top img {
       margin: -20% auto 0;
      }
      
      div.crop-bottom img {
       margin: 0 auto -20%;
      }
      
      div.crop-vertically img {
        margin: -20% auto -20%;
      }
   
 
     div.crop-right img {
        width: 120%;
        margin: 0 -20% 0 0;
     }
     div.crop-left img {
       width: 120%;
       margin: 0 0 0 -20%;
     }
     div.crop-horizontally img {
       width: 180%;
        margin: 0 -20% 0;
        height: 500px;
     }
     div.crop-square img {
        width: 100%;
     }
   </style>
 </head>
 
 <body>
   <div id="app">
     <h3>Normal</h3>
     <div>
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Top Cropped</h3>
     <div class="crop-top">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Bottom Cropped</h3>
     <div class="crop-bottom">
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Bottom and Top Cropped</h3>
     <div class="crop-vertically">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Right Cropped</h3>
     <div class="crop-right">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Left Cropped</h3>
     <div class="crop-left">
       <img src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Left and Right Cropped</h3>
     <div class="crop-horizontally">
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
     <h3>Square Crop</h3>
     <div class="crop-square">
       <img
src="https://images.unsplash.com/photo-1505649118510-a5d934d3af17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       />
     </div>
   </div>
 </body>
</html>

HTML側のクラス名属性と、それに対応するCSSを見比べてみてください。margin をどのように設定すれば、見せたい部分だけを表示できるのかが理解できるはずです。

ブートキャンプ参加者の81%が、受講後にテック業界でのキャリア展望についてより自信を持てるようになったと回答しています。今すぐブートキャンプとのマッチングを試してみましょう。

ブートキャンプ修了生は、受講開始から初めての仕事に就くまで、平均6ヶ月未満でキャリアチェンジを果たしています。

CSSのtext-indentプロパティでテキストインデントを設定する方法

CSSのfont-kerning・letter-spacing・word-spacingプロパティ徹底解説

CSSのobject-fitとobject-positionを使って画像を切り抜く方法
CSSのobject-fitプロパティとobject-positionプロパティを組み合わせることで、要素内に表示する画像を切り抜いたり、表示位置を細かく調整したりできます。レスポンシブデザインにおいて、画像のアスペクト比を保ちながらレイアウトに収めたい場合に非常に便利な機能です。基本構文 CSSのobject-fitプロパティおよびobject-positionプロパティの構文は以下の通りです。 Selector { object-fit: /*値*/; object-position: /*値*/; } object-fitの主な値 cover: アスペクト比を維持した
CSSだけで実現するスムーススクロールの書き方
CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ