画像の幅を決めた状態の縮小と拡大の仕方

お世話になります。
コーディングの勉強でAirbnbの模写をしております。
画像１００％の状態で縮小させレスポンシブに対応させたいと思っております。
縦の幅を６８０pxにして等倍縮小をしたいのですが、当然ながら指定してしまうと縦幅６８０px固定で画面を縮小させることになるので、画像が縦に潰れてしまいます。お恥ずかしながらここで何日も解決できず先に進むことができません・・・

見本のようなサイズで縮小ができるコードの書き方、お分かりになる方、教えていただけると助かります。

<div class="key_visual">
        <img src="image/main.jpg" alt="トップ画像">
</div>

.key_visual {
    max-width: 1360px;
    height: 680px;
    margin: 0 auto;
    padding: 0 40px;
    background-color: #000;
}

.key_visual img {
    vertical-align: bottom;
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
}


### 試したこと
見本にしたページの検証ツールを何度も見ておりますが、階層がとても複雑で再現がなかなかできません。

元のサイトはこちらです
https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1601556550_N2IyMTk5ZGYzYjM2

### 補足情報（FW/ツールのバージョンなど）
わかりやすいように黒く色を付けました。高さがはみ出してしまうのが解決できません・・・
見本では切り取ったりしているわけではないようです。

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうですか。

css
1.key_visual img {
2    vertical-align: bottom;
3    width: 100%;
4    height: 100%; /* 追加 */
5    border-radius: 16px;
6    object-fit: cover;
7    object-position: center; /* 追加 */
8}

追記

模写先は画面幅 1200pxで高さ680px固定と、autoを切り替えているようですので、
メディアクエリで実装してみました。

css
1.key_visual {
2  max-width: 1360px;
3  height: 680px;
4  margin: 0 auto;
5  padding: 0 40px;
6  background-color: #000;
7}
8.key_visual img {
9  width: 100%;
10  height: 100%;
11  border-radius: 16px;
12  object-fit: cover;
13  object-position: center
14}
15
16@media screen and (max-width: 1200px) {
17  .key_visual {
18    height: auto;
19  }
20}