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

スポンサーリンク

※本サイトにはプロモーションが含まれています

画像を使い回したいけど、
場所によって比率が異なるときなど、
CSSで画像トリミングができると便利です。

今回は、背景画像の場合と、imgタグの場合の
トリミング方法をまとめました。

元画像はこちら(hamarikyu.jpg)

都会のオアシス・浜離宮で撮った写真です。
この写真をトリミングしていきます。

トリミングの方法、外接or内接??

トリミングする前に、概念を共有しましょう。

外接リサイズ

画像の短い方の辺を、切り取り枠に合わせる方法。
(画像の一部が切り取られる。)

内接リサイズ

画像の長い方の辺を、切り取り枠に合わせる方法。
(画像は全て収まる。枠内に余白ができる。)

これを踏まえて話を進めます。
内接・外接わかりやすいように、背景に色をつけます。

背景画像をトリミングする方法

外接リサイズ

HTML

CSS

プレビュー

内接リサイズ

HTML

CSS

プレビュー

imgタグに対してトリミングする方法

imgタグに対してトリミングをしたい場合は、object-fitを使います。
対応ブラウザはこちらをチェック(Can I Use?)

外接リサイズ

HTML

CSS

プレビュー

浜離宮

内接リサイズ

HTML

CSS

プレビュー

浜離宮

コメント

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