画像を使い回したいけど、
場所によって比率が異なるときなど、
CSSで画像トリミングができると便利です。
今回は、背景画像の場合と、imgタグの場合の
トリミング方法をまとめました。
元画像はこちら（hamarikyu.jpg）
都会のオアシス・浜離宮で撮った写真です。
この写真をトリミングしていきます。
トリミングの方法、外接or内接？？
トリミングする前に、概念を共有しましょう。
外接リサイズ
画像の短い方の辺を、切り取り枠に合わせる方法。
（画像の一部が切り取られる。）
内接リサイズ
画像の長い方の辺を、切り取り枠に合わせる方法。
（画像は全て収まる。枠内に余白ができる。）
これを踏まえて話を進めます。
内接・外接わかりやすいように、背景に色をつけます。
背景画像をトリミングする方法
外接リサイズ
HTML
1 | <divclass="bg_trim_out"></div> |
CSS
1 2 3 4 5 6 7 8 9 10 | .bg_trim_out{ width:500px; height:500px; background-image:url(hamarikyu.jpg); background-color:rgba(0,0,0,.5); background-size:cover; background-position:centercenter; background-repeat:no-repeat; } |
プレビュー
内接リサイズ
HTML
1 | <divclass="bg_trim_in"></div> |
CSS
1 2 3 4 5 6 7 8 9 10 | .bg_trim_in{ width:500px; height:500px; background-image:url(hamarikyu.jpg); background-color:rgba(0,0,0,.5); background-size:contain; background-position:centercenter; background-repeat:no-repeat; } |
プレビュー
imgタグに対してトリミングする方法
imgタグに対してトリミングをしたい場合は、object-fitを使います。
対応ブラウザはこちらをチェック（Can I Use?）
外接リサイズ
HTML
1 | <imgclass="trim_out"src="hamarikyu.jpg"alt="浜離宮"> |
CSS
1 2 3 4 5 6 7 | .trim_out{ width:500px; height:500px; object-fit:cover; background-color:rgba(0,0,0,.5); } |
プレビュー
内接リサイズ
HTML
1 | <imgclass="trim_in"src="hamarikyu.jpg"alt="浜離宮"> |
CSS
1 2 3 4 5 6 7 | .trim_in{ width:500px; height:500px; object-fit:contain; background-color:rgba(0,0,0,.5); } |
プレビュー
コメント