画像を使い回したいけど、
場所によって比率が異なるときなど、
CSSで画像トリミングができると便利です。
今回は、背景画像の場合と、imgタグの場合の
トリミング方法をまとめました。
元画像はこちら（hamarikyu.jpg）
都会のオアシス・浜離宮で撮った写真です。
この写真をトリミングしていきます。
トリミングの方法、外接or内接？？
トリミングする前に、概念を共有しましょう。
外接リサイズ
画像の短い方の辺を、切り取り枠に合わせる方法。
（画像の一部が切り取られる。）
内接リサイズ
画像の長い方の辺を、切り取り枠に合わせる方法。
（画像は全て収まる。枠内に余白ができる。）
これを踏まえて話を進めます。
内接・外接わかりやすいように、背景に色をつけます。
背景画像をトリミングする方法
外接リサイズ
HTML
|
1 |
<div class="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: center center; background-repeat: no-repeat; } |
プレビュー
内接リサイズ
HTML
|
1 |
<div class="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: center center; background-repeat: no-repeat; } |
プレビュー
imgタグに対してトリミングする方法
imgタグに対してトリミングをしたい場合は、object-fitを使います。
対応ブラウザはこちらをチェック（Can I Use?）
外接リサイズ
HTML
|
1 |
<img class="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 |
<img class="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); } |
プレビュー
コメント