前文：
ややレスポンシブなテーマ (スケルトン) を使用しています。画面サイズが小さい場合は、レイアウトを 1 列に変更します。
私の問題は：
画面のサイズを変更しても、ヘッダー画像 (管理パネルのテーマ オプションを使用して挿入したもの) がスケーリングされません。常に 940x150 のままです。モバイルで表示すると、左側の 1 列にコンテンツを含むフル サイズのヘッダーが表示されるため、あらゆる種類の空白が残ります。
したいこと: 画面の幅に合わせて画像を縮小する
また
ヘッダー画像を小さな画面サイズに合わせたものに置き換えます。
オプション 2 の問題は、すべてのデバイスが同じ画面幅を持っているわけではないため、ある程度までスケーリング可能である必要があることです。
理想的には：
以下の幅を超えると、画像は 700 程度 (iPad の横長) と 940 標準の間の画面に収まるようにスケーリングされます。
特定の画面幅 (たとえば、タブレット/iPad サイズ以下、最大幅 700 程度) を下回ると、画像は小さい方の画像に交換され、300 から 700 程度 (iPad サイズのすぐ下) の間で拡大または縮小されます。 ）。
このようにして、画像は常にサイトのレンダリングに適切なサイズになります.
この特定の画像の問題は、中央の空白 (空のスペース) の量です。特定の幅を下回ると、画像の要素がアーティファクトになり、それらの間に非常に多くのスペースができて乱雑になると思います。
サイト：
porthuronairportshuttle.com