CSS で画像をトリミングする方法
公開日
by
CSS で画像をトリミングする方法を紹介します。
例えば、パソコンとスマホで画像のトリミングを変えたいときなどに便利な方法です。
- CSS を使った画像のトリミング方法
- object-fit を使った画像のトリミング方法
- position と overflow を使った画像のトリミング方法
- background-image を使った画像のトリミング方法
CSS を使った画像のトリミング方法
CSS を使った画像のトリミング方法は複数あります。
画像要素に直接指定することで簡単に実装できる object-fit を使った方法や、親要素と子要素を用意して position と overflow を使う方法。
background-image を使って背景画像として取り込みトリミングする方法など。
それぞれの方法には個性があるので、個々の特徴をおさらいしつつ、目的にあった方法を試してください。
object-fit を使った画像のトリミング方法
トリミング後の画像サイズが決まっている場合は object-fit を使った方法で簡単に実装できます。
レスポンシブ対応のためには工夫が必要ですが、スマホでのサイズの値が vw で指定できる場合は問題ないでしょう。
ベースとなるHTMLとCSSの指定は次のようになります。
<img src="example.jpg">
img {
width: 300px;
height: 200px;
object-fit: cover;
}
画像サイズが400px x 400px だった場合、指定の方法では 300px x 200px でトリミングして表示することができます。
トリミング時の画像の表示のされ方は、object-fit で指定する値によって調整することが可能です。
- fill
- 画像比率を変えて、要素内を満たすように表示されます。
- contain
- 画像比率を保って、要素内に収まるように表示します。
- cover
- 画像比率を保って、要素内を満たすように表示されます。
- none
- 画像サイズをそのままに、要素の指定サイズ内に表示されます。
- scale-down
- 画像比率を保って、画像サイズが大きければ要素内に収まるように、小さければそのままのサイズが表示されます。
スマートフォンで画面サイズに合わせたサイズで表示する場合、数値の値を vw で指定することで対応することができます。
画像の比率が３：２の場合の指定は次の通りです。
img {
width: 100vw;
height: 66vw;
object-fit: cover;
}
position と overflow を使った画像のトリミング方法
object-fit が使えない場合の選択として、position と overflow を使った画像のトリミング方法があります。
親要素にはトリミングしたいサイズを指定、合わせてトリミングするための overflow: hidden; を指定。
子要素にはトリミングしたい画像を position: absolute; で要素内の中央に表示。
ベースとなるHTMLとCSSの指定は次のようになります。
<div class="parent">
<img src="example.jpg">
</div>
.parent {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.parent img {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100%;
height: auto;
transform: translate(-50%,-50%);
}
background-image を使った画像のトリミング方法
object-fit に続いて実装が簡単なのが background-image を使った方法になります。
ベースとなるHTMLとCSSの指定は次のようになります。
<div class="background"></div>
.background {
width: 300px;
height: 200px;
background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
まとめ
CSS で画像をトリミングする方法を紹介しました。
