【object-fit】cssで画像を切り抜く方法

画像を切り抜くときはどうしていますか？

以前はpositionを使っているやっている人も多かったと思います。

いまでは画像や動画を簡単にクリッピングできるobject-fitというcssがあります。

1行だけ記入するだけなので楽です。

object-fitの使い方

まずはobject-fitの書き方や値についてみていきましょう。

object-fitで使える値

object-fitは下記のように記述します。

img{
	object-fit: cover;
}

次はobject-fitで使える値を紹介します。

値	説明
fill	初期値
contain	縦横比を保ったまま、全体が収まるように表示してくれる
cover	縦横比を保ったまま、縦幅や横幅いっぱいに拡大縮小をしてくれる
none	拡大縮小しない
scale-down	小さいほうのサイズに合わせて表示してくれる

実際に結果を見てみましょう

今回使う画像は下記になります。

fillを使う

fillは初期値になります。

html

<div class="img-object-fit img-object-fit-fill">
<img src="https://7-create.com/wp-content/uploads/2023/01/cat.jpg" alt="">
</div>

css

.img-object-fit{
        width: 200px;
        height: 200px;
        overflow: hidden;
}

.img-object-fit img{
        width: auto;
        height: auto;
	max-width: 100%;
}
    
.img-object-fit-fill img{object-fit: fill;}

coverを使う

coverを使うことで縦横比を保ったまま、縦幅や横幅いっぱいに拡大縮小をしてくれます。

html

<div class="img-object-fit img-object-fit-cover">
<img src="https://7-create.com/wp-content/uploads/2023/01/cat.jpg" alt="">
</div>

css

<style>
.img-object-fit{
        width: 200px;
        height: 200px;
        overflow: hidden;
}

.img-object-fit img{
        width: auto;
        height: auto;
	max-width: 100%;
}

.img-object-fit-cover img{object-fit: cover;}

containを使う

containを使うことで縦横比を保ったまま、全体が収まるように表示してくれる

html

<div class="img-object-fit img-object-fit-contain">
<img src="https://7-create.com/wp-content/uploads/2023/01/cat.jpg" alt="">
</div>

css

.img-object-fit{
        width: 200px;
        height: 200px;
        overflow: hidden;
}

.img-object-fit img{
        width: auto;
        height: auto;
	max-width: 100%;
}

.img-object-fit-cover img{object-fit: cover;}

noneを使う

noneを使うと拡大縮小なしです。

html

<div class="img-object-fit img-object-fit-none">
<img src="https://7-create.com/wp-content/uploads/2023/01/cat.jpg"lt="">
</div>

css

.img-object-fit{
        width: 200px;
        height: 200px;
        overflow: hidden;
}

.img-object-fit img{
        width: auto;
        height: auto;
	max-width: 100%;
}

.img-object-fit-none img{object-fit: none;}

scale-downを使う

scale-downは小さいほうのサイズに合わせて表示してくれます。

html

<div class="img-object-fit img-object-fit-scale-down">
<img src="https://7-create.com/wp-content/uploads/2023/01/cat.jpg" alt="">
</div>

css

.img-object-fit{
        width: 200px;
        height: 200px;
        overflow: hidden;
}

.img-object-fit img{
        width: auto;
        height: auto;
	max-width: 100%;
}

.img-object-fit-scale-down img{object-fit: scale-down;}

まとめ

object-fitはCSSを一行追加するだけなので簡単な指定なので使いやすいですね。