「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法

.flex-item {
flex-basis: 100%;
}

.image-wrap {
position: relative;
overflow: hidden;
padding-top: 60%;
margin: 0 auto;
}

.image-wrap img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
}

画像を任意の位置でトリミングする場合

imgに

object-position: 100% 20%;

を追加する。

参考URL

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー