レスポンシブモードではうまく縮むのに、実機だと縮みません。

1000*640の画像を表示させて、画面幅によってサイズを変えようと思っております。
クロームの検証モードのレスポンシブモードでは、以下のコードでうまく表示されたのですが、
iphon11の実機では、画像が面長になってしまっています。
強制リロードをしたり、キャッシュを消してみても状況が変わりませんでした。
どうしたら実機でもうまく表示されるでしょうか？

レスポンシブは、以下のサイトを参考にしています。
https://sole-color-blog.com/blog/72/
追記
safariのレスポンシブモードでスマホの大きさにすると、
Pc上でも縦長の画像になってました。
height:300px;
とか具体的な値に直すと、ちょうどいい大きさになるのですが、
横幅に合わせて縦幅も自動で調整されるようにしたいです。
よろしくお願いします。

<section class="about-site">
  <div class="about-site-wrap">
    <div class="about-site-wrap-sales">
      <img src="//img/neko-hero-ninki.png" ">
    </div>
  </div>
</section>

.about-site {
  min-height: auto;
  background: url("../img/buildings.svg") no-repeat;
  background-size: cover;
  background-position: center center;
}

.about-site-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 20px;
}



.about-site-wrap-sales {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.about-site-wrap-sales img {
  height: auto;
  padding: 25px 25px 0px 25px;
  max-width: 80%;
}

@media only screen and (min-width: 400px) and (max-width: 563px) {
  .about-site-wrap-sales img {
    max-width: 100%;
  }

}

@media only screen and (max-width: 399px) {
  .about-site-wrap-sales img {
    max-width: 100%;
    padding: 11px 10px 0px 10px;
  }
}