ヘッダーアイキャッチで、画像の縦横比を保ちながら、上に文字・ボタンを表示したい

前提として、自動で画像のサイズの縦横比が変わるのは、ヘッダーアイキャッチ内の文字やボタンが画像からはみ出ないようにするためです。
（ユーザーによって端末のサイズが異なるため、どのサイズでも画像から文字がはみ出ないようにするためには、このような調整をする必要があります）

もし、最悪はみ出てもよい、ということであれば、ちょっとしたテクニックを使うことで縦横比をキープすることができます。
外観⇒カスタマイズ⇒追加CSSに下記を追加します。

#header-image {
    min-height: auto;
    height: 0;
    width: 100%;
    padding-bottom: 43%;/* ここに画像の比率（高さ ÷ 横幅）を指定する */
}

.header-image__text {
    margin: 0 auto;
    padding: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}

ただし端末サイズによってははみ出てしまう可能性があるのでご注意ください。

よろしくお願いします。

お返事ありがとうございます。
縦横比を保ちながら表示することができました。
ただ、横幅いっぱいまで表示されているのですが、今の状態のまま「画像の最大横幅に制限を持たせる（推奨）」設定を生かすことはできますか？

width: 100%;を消せばOKです！
よろしくお願いします。

お返事ありがとうございます。
画像のサイズが1200×314pxという中途半端なサイズなのですが、とりあえず26％で設定し、width: 100%;を消してみたところ、両サイドが消えてしまいました。
20％にしてみるとPCではピッタリだったのですが、スマホでは上下が削られてしまいました。
そこで間をとって23％にしたところ、いい感じに表示されるようになりました。
テキストもはみ出ていないのでこれで大丈夫そうです。
どうしても文字を乗せたかったので助かりました。ありがとうございます。

なるほど！たしかにそのように調整すると良さそうですね。
丁寧なご報告、ありがとうございました。