長方形の画像を、親要素のwidth90%を一辺とした正方形範囲だけ表示させたい

Question

前提・実現したいこと

現在HTML／CSSの勉強をしております。

<main>
 <div class="main_img_old_container">
  <img src="img/oldman.jpg" alt="" class="main_img_old">
 </div>
</main>

main{
width: 100%;
}

oldmanという横に長い長方形の画像の中心を、mainのwidth90%を一辺とした正方形の範囲だけトリミングしたように表示させ、かつレスポンシブ対応させたいです。

画像は1548*870pxです。

何卒ご教授よろしくお願いいたします。

試したこと

padding-topを100%とする方法については試してみましたが、横に縮尺されてしまい、上手くいきませんでした。

.main_img_old_container{
  position: relative;
  width: 90%;
  height: auto;
}

.main_img_old_container::before{
  display: block;
  content: "";
  padding-top: 100%;
}

.main_img_old{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 1

こちらでいかがでしょうか?

.main_img_old_container {
  position: relative;
  width: 90%;
  height: auto;
  
  /* 追加 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}


.main_img_old_container::before {
  display: block;
  content: "";
  padding-top: 100%;
}

.main_img_old {
  position: absolute;
  /*
  top: 0;
  left: 0;
  */

  /* 追加 */
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

Comments

[strexxx]

ご回答誠にありがとうございます。
実はAirbnbの模写中なのですが、(サイト中部のシーツを敷いている老人)
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1572917376_Zjk1MzU0NmY1ZDZm
ご教授いただいた内容について、おおよそイメージ通りでしたが画像右側に余白ができてしまいました。
もう少し検討してみます。ご迅速な対応ありがとうございました。

[strexxx]

もう一度見直したところ、こちらのミスでできていた余白でした。大変参考になりました。
ありがとうございました。