HTMLで画像が歪んだ時の対処法

現状の問題

• トップページ（HTML）の画像が歪む
  以下の画像のように横幅が合わせるため画像が歪む
  

理想

adobe XDで作成した以下画像のように歪まないようにしたい

理想に近づけるために

インストラクターの方に方法と参考サイト両方を教わり、以下方法を実行
figureタグにoverflow:hidden
imgタグに[object-fit: cover;]（中央でトリミングしてくれるらしい）
以下コード

<div class="contents_item">
  <figure class="item_img"><!--overflow:hidden-->
    <img src="images/event_yamagata.png" alt=""><!--object-fit: cover;-->
  </figure>
  <div class="item_title">
   <p>
    グッズ展開催in山形
   </p>
  </div>
  <div class="item_genre">
    <div class="genre_flex">
      <p>開催場所：</p>
      <p>山形県</p>
    </div>
    <div class="genre_flex">
      <p>期間:</p>
      <p>2021/4/5~5/5</p>
    </div>
  </div>
  <div class="item_botton">
    <a class="item_click" href="#">
      <p>詳細はこちら</p>
    </a>
  </div>
</div>

.item_img {
    width: 252px;
    height: 214px;
    overflow: hidden; /*ここ*/
    margin: 0 0 20px 0;

    display: flex;
    justify-content: center;
}

.item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /*ここ*/
}

結果

歪みがなくなりました！
（以下HTMLファイルの画像）

参考サイト

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