CSSで、サイズや比率がバラバラの画像をトリミングするには、トリミング対象の画像に外枠となる要素で囲む必要があります。

外枠となる要素からはみ出る部分を『overflow: hidden;』で表示しないようにする仕組みです。

【例）HTML】
<div class=”trimming”>
<img src=”使用画像のパス” alt=”” >
</div>

<img>タグはインライン要素なので、『display: block; 』を指定しておくと良いです。

【例）CSS】
.trimming{
overflow: hidden;
width: 300px;/* 枠の幅 */
height: 200px;/* 枠の高さ */
position: relative;
}

これらを基本として、様々なトリミングパターンに適応させていきます。

こちらは、横幅に合わせてトリミングをしたデモです。

① 外側の枠でトリミングしたいサイズを指定
② 画像をpositionとtransformで中央に配置
③ はみ出た部分はoverflow: hidden;でカット

※ 合わせて、ベンダープレフィックスも指定しておきましょう。

こちらは、高さに合わせてトリミングをしたデモです。
記述内容は、横幅に合わせてトリミングをする記述と同じです。
ただ、今回は、分かりやすくするため、外枠の幅、高さの比率を変えてあります。

こちらは、リサイズせずに中央に合わせて、はみ出た分をトリミングをしたデモです。
記述内容は『横幅や高さに合わせてトリミング』の画像に対するCSS記述で、width、heightの指定をしないパターンとなります。

こちらは、画像の縦と横、大きいほうに合わせてリサイズをしたデモです。
width、heightをそれぞれautoにして、max-width、max-heightをそれぞれ100%にすることがポイントとなります。