模写修行メディア

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

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

この記事をシェア:

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

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

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

画像は 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つずつ紹介します。IEでは使えないので、もしIE対応も必要な場合は Polyfillを使うと良いです。


💡 object-fit: fill;

object-fit: fillの画像
  • 400 × 400pxの領域に表示
  • 横幅800pxの画像を使用

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


💡 object-fit: cover;

object-fit: coverの画像
  • 400 × 400pxの領域に表示
  • 横幅800pxの画像を使用

画像の縦横比は保持しながら、指定された幅と高さに余白なく収まります。CSSのbackground-size: cover;と同じようになります。cover使う機会が圧倒的に多いと思います。


💡 object-fit: contain;

object-fit: containの画像
  • 400 × 400pxの領域に表示
  • 横幅800pxの画像を使用

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


💡 object-fit: none;

👇 パターン1

object-fit: noneの画像
  • 400 × 400pxの領域に表示
  • 横幅200pxの画像を使用

👇 パターン2

object-fit: noneの画像
  • 400 × 400pxの領域に表示
  • 横幅400pxの画像を使用

👇 パターン3

object-fit: noneの画像
  • 400 × 400pxの領域に表示
  • 横幅800pxの画像を使用

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


💡 object-fit: scale-down;

👇 パターン1

object-fit: scale-downの画像
  • 400 × 400pxの領域に表示
  • 横幅200pxの画像を使用

👇 パターン2

object-fit: scale-downの画像
  • 400 × 400pxの領域に表示
  • 横幅400pxの画像を使用

👇 パターン3

object-fit: scale-downの画像
  • 400 × 400pxの領域に表示
  • 横幅800pxの画像を使用

containnoneの小さい方に合わせて収まります。


💡 object-position

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

object-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;
  padding-top: 50%;
  position: relative;
}
.post-thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.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;
  padding-top: 50%;
  position: relative;
}
.post-thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

重要なのは上の箇所です。レスポンシブで比率を保つためにpadding-top: 50%;を指定します。今回は2:1にしたかったので、(1/2) × 100% = 50%になっています。2:3にしたければ、(2/3) × 100% = 66.66666%です

aspect-ratioを使うともっとスッキリ書けますが、まだ全モダンブラウザで対応されていません。

CSSで縦横比(アスペクト比)を固定できるaspect-ratioについて!具体的な使い道も紹介!

aspect-ratioについては上の記事で紹介しています。

Point
経験上、この事例がobject-fitで1番使います。

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

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設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

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

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材