接続に失敗しました。もう一度試してください。

コンテンツにスキップ
SEO Tools
ヘルプとドキュメント
UX / UI 中程度の影響 簡単 10～20分

レスポンシブ画像

画像は水平スクロールなしでモバイルに収まる必要があります。

それは何ですか

幅が固定された大きな画像 (例: width="1200") は、幅の狭い携帯電話では画面からはみ出し、ページ全体が水平スクロールする可能性があります。

なぜそれに対処するのでしょうか？

水平スクロールは、モバイルで最も厄介な UX 問題の 1 つです。レイアウトが崩れ、未完成に見えます。単一の CSS ルールで簡単に防止できます。

やり方

  1. 1画像の最大幅: 100%、高さ: 自動を指定します。
  2. 2レイアウト安定性 (CLS) のために HTML で幅と高さを指定しますが、CSS で制限します。
  3. 3さまざまなサイズについては、srcset / <picture> を考慮してください。
  4. 4狭い幅 (~360px) でテストして、何も水平方向にスクロールしないことを確認します。

例

Správně
img { max-width: 100%; height: auto; }

結論

単一のルール (最大幅:100%、高さ:自動) で、モバイル上のほとんどの画像オーバーフローが解決されます。 CLS の HTML にディメンションを追加し、大きなビジュアルの場合は srcset を検討してください。一般的なモバイルの問題を簡単に解決します。

関連トピック