object-fitを用い簡単に画像をトリミング

画像をトリミングするする際、以下のコードとなる。
object-fitを1行追加するだけで、簡単にトリミングを行う。

<style>
.trim img {
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
width : auto;
height : 100%
}

.trim {
position : relative;
display : block;
width : 200px;
height : 200px;
overflow : hidden;
}
</style>

<div class="trim"><img src="画像URL"></div>

CSS

<style>
.trim {
width : 200px;
height : 200px;
object-fit : cover;
}
</style>

<img src="画像URL" class="trim">

結果

元画像(300×200px)トリミング画像(200×200px)