CSSで画像をトリミングする方法を紹介！

サイトを制作をしていると、imgタグで入れた画像をトリミングしたい場面があります。この記事ではCSSだけで画像をトリミングする方法を紹介します。

• object-fitを使ってトリミングする方法
• border-radiusを使ってトリミングする方法

この記事では、上の2つを紹介します。それぞれ出来る事が違うので、是非ご覧ください。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

画像は width と height だけじゃトリミング出来ない

<img width="..." height="..." src="hoge.jpg" alt="..." class="hoge-img" >

.hoge-img{
    width: 400px;
    height: 400px;
}

右の画像にはwidthとheightを400pxにしました。オリジナルの画像が縦長なので、widthとheightの指定だけではオリジナルの縦横比が崩れ、つぶされたような形になってしまいます。

背景画像でトリミングするのはNG

<div class="hoge-img"></div>

.hoge-img{
    width: 400px;
    height: 400px;
    background-image: url(../img/hoge.jpg);
    background-size: cover;
    background-position: center;
}

このようにbackground-imageで書くことで、うまく400px × 400pxでトリミングできています。しかしこの方法は以下の 2 点が理由であまり良くありません。

• コンテンツとしての画像は img タグで入れるべき
• 背景画像として入れた画像はインデックスされない

コンテンツとしての画像は img タグで入れるべき

HTMLは意味付け、CSSは装飾のためにあります。画像も例外ではなく、画像自体がコンテンツであればimgタグで入れるべきで、装飾目的であればCSSで入れても良いです。

CSSで入れても良いと書いたのは、imgタグで入れてもalt属性を空にすれば、装飾目的の画像と同じ事だからです。

背景画像として入れた画像はインデックスされない

CSSで入れた画像は画像検索にインデックスされません。画像検索からの流入が多いサイトでは、機会損失になります。装飾目的でなければimgタグで入れるべきです。

CSSで画像をトリミングする方法

前述した通り、装飾目的の画像以外は、背景画像で入れるべきではないので、imgタグで入れつつトリミングする方法を紹介します。

• object-fit を使ってトリミングする方法
• border-radius を使ってトリミングする方法

上の2つについて紹介ます。

object-fitを使ってトリミングする方法

• fill
• cover
• contain
• none
• scale-down

object-fitには上の5つの値があります。1つずつ紹介します。

object-fit: fill;

• 400 × 400pxの領域に表示
• 横幅800pxの画像を使用

object-fitの初期値で、縦横比を変えて指定された幅と高さにリサイズされます。従って、潰れた感じになってしまいます。

object-fit: cover;

• 400 × 400pxの領域に表示
• 横幅800pxの画像を使用

画像の縦横比は保持しながら、指定した幅と高さに余白なく収まります。background-size: cover;と同じようになります。

coverを使う機会が圧倒的に多いです。

object-fit: contain;

• 400 × 400pxの領域に表示
• 横幅800pxの画像を使用

画像の縦横比は保持しながら、指定した幅と高さに画像全てが表示されるように収まります。background-size: contain;と同じようになります。

object-fit: none;

👇 パターン1

• 400 × 400pxの領域に表示
• 横幅200pxの画像を使用

👇 パターン2

• 400 × 400pxの領域に表示
• 横幅400pxの画像を使用

👇 パターン3

• 400 × 400pxの領域に表示
• 横幅800pxの画像を使用

リサイズされずに指定された幅と高さ内に収まります。リサイズされないので、表示領域とオリジナルの画像のサイズによって見た目は変わります。

object-fit: scale-down;

👇 パターン1

• 400 × 400pxの領域に表示
• 横幅200pxの画像を使用

👇 パターン2

• 400 × 400pxの領域に表示
• 横幅400pxの画像を使用

👇 パターン3

• 400 × 400pxの領域に表示
• 横幅800pxの画像を使用

containとnoneの小さい方に合わせて収まります。

object-position

object-positionを使うことで、画像のどこを基準に表示するか指定できます。CSS のbackground-positionと同じような機能になります。

.hoge-img{
    width: 400px;
    height: 400px;
    object-fit: cover;
    object-position: 0 0;
    ...
}

object-position: left top;でも同じようになります。

右上を基準にしたい場合、object-position: 0 100%;になります。デフォルトはセンターが基準です。

レスポンシブで縦横比を保持しながらトリミング(1番使う)

• 2:1の比率でトリミング
• レスポンシブで画像の横幅は可変

上の動画で使ってるサムネの画像は、横長(1200 × 675)と縦長(1200 × 1800)の画像です。これらの画像をobject-fit: cover;でトリミングしています。

例えば、メディアのサムネイルは、どんな画像がアップされるかわかりません。必ず同じ縦横比の画像を入れるルールで運用しても良いですが、CSSでトリミングしておけば安心です。

<!-- posts -->
<div class="posts">
    <article class="post">
        <a href="#" class="post-thumbnail">
            <img src="img/post.jpg" width="1200" height="675" alt="..." />
        </a>
        <h2 class="post-title">
            <a href="#">コーディング基礎から応用までの学習ロードマップ</a>
        </h2>
    </article>

    <article class="post">
        <a href="#" class="post-thumbnail">
            <img src="img/post02.jpg" width="1200" height="1800" alt="..." />
        </a>
        <h2 class="post-title">
            <a href="#">コーディング基礎から応用までの学習ロードマップ</a>
        </h2>
    </article>

    ...
</div>
<!-- end posts -->

.posts {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
@media screen and (min-width: 500px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1080px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-thumbnail {
  display: block;
  aspect-ratio: 2 / 1;
}
.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-title {
  font-weight: bold;
  font-size: 18px;
  margin-top: 8px;
}
@media screen and (min-width: 768px) {
  .post-title {
    font-size: 22px;
  }
}

コードはこのようになっています。

.post-thumbnail {
  display: block;
  aspect-ratio: 2 / 1;
}
.post-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

aspect-ratioを使って領域は確保しています。

border-radiusを使ってトリミングする方法

border-radiusは角丸を指定するプロパティです。既に知っている方も多いと思うので、何パターンかサンプルを紹介する程度にします。サンプルは正方形の画像を使っています。

/* 1番目の画像 */
.hoge-img:nth-child(1) {
    border-radius: 40px;
}

/* 2番目(中央)の画像 */
.hoge-img:nth-child(2) {
    border-radius: 50%;
}

/* 3番目の画像 */
.hoge-img:nth-child(3) {
    border-top-left-radius: 100px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 120px;
}

あまり使い所はないかもしれませんが、3 番目の画像のように4つ角全てバラバラのサイズを指定することも出来ます。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！