【文系大学生がわかりやすく解説】CSSで画像をトリミングする方法を2パターン紹介

トリミングサムネCSS
スポンサーリンク

皆さんこんにちは!最近Podcastにハマっているマダラ蝶です。

さて、今回のブログは画像についてです!HTMLやCSSで画像を表示させる際にブラウザ幅やデザインの関係で画像のサイズを統一させたいといった場面に遭遇することがあるかと思います。しかし、必ずしもサイズごとに画像が用意されているとも限らないですし、毎回Photoshopでリサイズするのも面倒です。今回は、そんなときに使えるCSSプロパティを紹介していきます!

今回のブログはこんな方におすすめ!
  • サイトのスマホ画面とPC画面で画像の表示幅を変えたい!
  • 画像をトリミングして表示させたい。
  • 画像を使いまわしたいけど毎回Photoshopなどの画像編集ツールで編集するのは面倒…
スポンサーリンク

トリミングの概念 外接?内接?

実際にトリミングを行う前に概念を共有しましょう。

外接リサイズ

外接リサイズとは、画像の短い方の辺を、切り取り枠に合わせる方法です。

内接リサイズ

内接リサイズとは画像の長い方の辺を、切り取り枠に合わせる方法です。
画像をトリミングせずに全体を表示させたいときに有効です。

背景画像のトリミング(background-image)

CSSのbackground プロパティで指定した画像に対してのトリミングはbackground-sizeとbackground-positionプロパティを使用します。

背景画像の外接リサイズ

See the Pen
poyPrOB
by Rikuto Ui (@riku-1219)
on CodePen.

このようにbackground-size: coverとbackground-position: center center;を使用します。

背景画像の外接リサイズ

See the Pen
dyMWqBR
by Rikuto Ui (@riku-1219)
on CodePen.

このようにbackground-size: contain;とbackground-position: center center; background-repeat:no-repeat;を使用します。

imgタグに対してトリミング

imgタグに対してトリミングするときは、object-fitプロパティを使用します。

CSS の object-fit プロパティは、置換要素、例えば img や video などの中身を、コンテナーにどのようにはめ込むかを設定します。

MDNより引用

imgタグで表示した画像の外接リサイズ

See the Pen
NWNgdzb
by Rikuto Ui (@riku-1219)
on CodePen.

このようにobject-fit: cover;の1行だけで画像をトリミングすることが出来ます。
しかもbackground-positionのプロパティを使わずに中央でトリミングできています。object-fit: cover; を使えば、画像のサイズを縦横のうち小さい方を基準にして自動的に拡大・縮小され、ボックスからはみ出した部分はトリミングされます。

また、高さや幅のどちらかを固定してトリミングしたいときは、

.bg-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

このように、固定したくない方を100%に指定することで、高さや幅のどちらかを固定してトリミングすることが出来ます。(この場合は高さを固定しています。)

imgタグで表示した画像の内接リサイズ

See the Pen
vYGZgvY
by Rikuto Ui (@riku-1219)
on CodePen.

このようにobject-fit: contain;の1行だけで画像をトリミングすることが出来ます。

まとめ

このように画像編集ソフトを使用せず、CSSでも画像をトリミングすることが出来ます。特にレスポンシブデザインをコーディングするときに画像を複数用意しなくても良くなるので作業効率が向上します。object-fitプロパティには他にも指定できる値があったり、表示させる範囲を指定できるCSSプロパティも存在するので気になった方は検索してみると新しい発見があるかもしれません。

コメント

タイトルとURLをコピーしました