サイトは https://adm-j.co.jp です。

前略、atsushi.c さん

すべての画面幅で、アピールエリアの画像全体を表示するのでしたら、以下のようなコードでイケそうな気がします。

#appeal {
  height: 38.55vw;
  max-height: 500px;
}

実際には、試していませんので、ブラウザを、いろいろなブラウザに変えても、問題がないか、ご確認なさってみてください。

atsushi.c さん

アピールエリアの背景画像の文字がスマホでは、小さくて読めない！ という場合は、現在設定している背景画像とアスペクト比が同じで、スマホでも読めるように文字を大きくた画像を、もう一枚作成して、以下のようにメディアクエリで画面幅によって、切り替わるようにしておけば良いかもしれません。

@media screen and (max-width:480px) { 
  .appeal {
    background-image: url( https://スマホ用の画像のURLをここに書く); 
  }
}

@leafytreeお返事ありがとうございます。うまく行きました。バッチリです。

@leafytree　こちらも一度試してみます。ありがとうございました。

@leafytree　こちらも一度試してみます。ありがとうございました。

少し質問なんですが、38.55の数値の意味を把握したいのですが、

画像サイズが1280x500なので、1280÷約320（スマホ画面）＝4　×10＝40vw

で合ってますか？

#appeal {
  height: 38.55vw;
  max-height: 500px;
}
アピールエリア
　高さ　：　38.５５　ビューポート width
 最大　高さ：５００px

@atsushi-c さん

計算方法は、以下のとおりです。

（（背景画像の高さ ÷ （ 背景画像の幅 + ブラウザの縦スクロールバーの幅 ））× 100 ＝ height（vw）

((500 ÷ （1280+17)) × 100＝38.55

単純に横幅を100とした場合の高さを計算しているだけです。

なお、アピールエリアの背景画像が常に画面横幅いっぱいに表示されるサイトの場合は、max-height は不要です。

@atsushi-c さんのサイトの場合は、アピールエリアの横幅は、画面横幅いっぱいではなく、限定されているのでPCで画面幅を 1282px 以上に広げたときのために、max-height を指定しています。（アピールエリアの左右にも余白ができるため）

@leafytree　なるほど！理解できました。ありがとうございました。