★ウェブ制作小ネタTIPS

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

横300×縦400ピクセルの画像を、横200×縦200ピクセルのボックス枠でトリミングしてみましょう。
CSSのobject-fitプロパティを使用します。

元の画像（横300×縦400ピクセル）

■使用例１

img.sample1 {
	width:200px; height:200px;
	object-fit:cover;
}

<img class="sample1" src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/bluemoon.jpg">

上記の使用例１では、CSSで画像のボックスサイズを width:200px; height:200px; と指定して、さらに object-fit: cover; を指定しています。
object-fitプロパティの値にcoverを指定すると、縦横の小さい方に合わせて画像がリサイズされて、ボックスからはみ出した部分はトリミングされます。
（上記の使用例１では、実際の画像の横幅300pxが200pxに縮小されています。縦幅400pxが200pxに縮小されたわけではありません。）

次に、画像の元のサイズを維持したままトリミングしてみましょう。

■使用例２

img.sample2 {
	width:200px; height:200px;
	object-fit:none;
}

<img class="sample3" src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/bluemoon.jpg">

上記の使用例２では、CSSで画像のボックスサイズを width:200px; height:200px; と指定して、さらに object-fit: none; を指定しています。
object-fitプロパティの値に none を指定すると、画像の元のサイズを維持したまま指定したボックスサイズでトリミングされます。

上記の使用例１と使用例２では、トリミングされた後の画像はともにセンター配置となっています。
これはボックスに対する画像の配置位置が、初期値では 50% 50% でセンター配置となっているためです。

そこで、次にボックスに対する画像の配置位置を指定してみましょう。
ボックスに対する画像の配置位置は、CSSのobject-positionプロパティで指定します。

■使用例３

img.sample3 {
	width:200px; height:200px;
	object-fit:none;
	object-position:50% 100%;
}

<img class="sample3" src="https://www.htmq.com/wp-content/themes/htmq/htmq-images/bluemoon.jpg">

上記の使用例３では、object-position: 50% 100%; の指定を追加しています。
これは、ボックス枠に対する画像の配置位置を、横方向50%（センター配置）、縦方向100%（下端配置）と指定しています。

尚、object-fitプロパティとobject-positionプロパティは、Internet Explorerではサポートされていないので注意してください。

■関連項目