Home » ★ウェブ制作小ネタTIPS

★ウェブ制作小ネタTIPS

CSSで画像をトリミングする
Google Chrome
Safari
Firefox
Opera
広告



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

元の画像(横300×縦400ピクセル)

■使用例1

CSSソース

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

HTMLソース

<img class="sample1" src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/bluemoon.jpg">
↓↓↓

ブラウザ上の表示

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

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

■使用例2

CSSソース

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

HTMLソース

<img class="sample3" src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/bluemoon.jpg">
↓↓↓

ブラウザ上の表示

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

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

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

■使用例3

CSSソース

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

HTMLソース

<img class="sample3" src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/bluemoon.jpg">
↓↓↓

ブラウザ上の表示

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

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

■関連項目

object-fit …… 画像などをボックスにどのようにはめ込むかを指定する
object-position …… 画像などのボックスへの配置位置を指定する
CSSで画像をトリミングする
広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.