UPDATE：2024.8.30
- CATEGORY
cssを使って画像を様々な形でトリミングする方法
Contents
簡単なトリミング
角を丸くする（border-radius）
正方形（または任意の比率）にトリミング（aspect-ratio＋object-fit）
.img_wrap{
aspect-ratio: 1 / 1;
}
.img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
}
aspect-ratio: 1 / 1;
}
.img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
}
円にトリミング（border-radius）
上記にborder-radiusを追加すると円にすることもできます
.img_wrap{
aspect-ratio: 1 / 1;
}
.img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%; ※追加 }
aspect-ratio: 1 / 1;
}
.img_wrap img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%; ※追加 }
円にトリミング（clip-path）
円はclip-pathを使うことでも可能です。img{
clip-path: circle(50%);
}
clip-path: circle(50%);
}
clip-pathは他にも様々な基本形状で切り抜くことができます。
clip-path
また、次に紹介しますがclip-pathでは複雑な形状の切り抜きも可能です。
複雑な形状でのトリミング（clip-path）
①まずは切り抜く形状のSVG画像を用意して、＜path>部分を＜clipPath＞で囲います。この時＜clipPath＞にはidを付けておきます。
それと①自体は表示させないようにするため、「width=”0″ height=”0″」を追加します。
②次に①の形状に切り抜く画像を用意します。
＜image＞に表示する画像を指定して、「clip-path=”url(#clip01)」のように①のidを指定すれば複雑な形状でも画像がトリミングされます。
なぜcssでトリミングをするのか
色々とメリットがあると思いますが、トリミングをCSSで行う理由は、その後にメンテナンスが楽になるというのが一番でしょう。
画像の差し替えが発生した場合、トリミングした画像を使用すると
差し換え画像もまず同じ形状にトリミングする必要がありますが
cssでトリミングすると差し替え画像をトリミングする必要が無くなるのでメンテナンスが楽になります。
また、cssで切り抜けば画像に対してアニメーションさせることも可能になるので表現の幅が広がります。
border-radius:20px;
}