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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

画像は 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タグで入れるべきです。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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

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

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

object-fit: fill;

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

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

object-fit: cover;

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

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

object-fitは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%;になります。デフォルトはセンターが基準です。

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

• 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つ角全てバラバラのサイズを指定することも出来ます。

独学に限界を感じていませんか？