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

コーディング時に、imgタグで入れた画像をトリミングしたい場面があります。

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

この記事では、上の2つの方法を紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

画像は 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の役割は下記になります。

• HTMLは意味付け
• CSSは装飾

画像も例外ではなく、画像自体がコンテンツ(=意味がある)であればimgタグで入れるべきで、装飾目的であれば『CSSで入れても良い』です。

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

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

CSSで入れた画像は画像検索にインデックスされません。

画像検索からの流入があるサイトでは、機会損失になります。装飾目的でなければimgタグで入れるべきです。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

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

object-fitを使ってトリミングする方法を紹介します。

object-fitは、fill / cover / contain / none / scale-downの5つの値を取れます。1つずつ紹介します。

object-fit: fill;

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

object-fit: cover;

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

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

object-fit: contain;

画像の縦横比は保持しながら、指定した幅と高さに画像全てが表示されるように収まります。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%;になります。デフォルトはセンターが基準です。

【具体例】レスポンシブで縦横比を保持しながらトリミング

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

上の動画で使ってる2つのサムネの画像は、横長(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;
  }
}

aspect-ratioについては、下記の記事をご覧ください。

縦横比(アスペクト比)を固定できる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つ角全てバラバラのサイズを指定することも出来ます。

基礎学習後...迷子になっていませんか？