ヘルプとドキュメント
UX / UI 中程度の影響 簡単 10～20分
レスポンシブ画像
画像は水平スクロールなしでモバイルに収まる必要があります。
それは何ですか
幅が固定された大きな画像 (例: width="1200") は、幅の狭い携帯電話では画面からはみ出し、ページ全体が水平スクロールする可能性があります。
なぜそれに対処するのでしょうか？
水平スクロールは、モバイルで最も厄介な UX 問題の 1 つです。レイアウトが崩れ、未完成に見えます。単一の CSS ルールで簡単に防止できます。
やり方
- 1画像の最大幅: 100%、高さ: 自動を指定します。
- 2レイアウト安定性 (CLS) のために HTML で幅と高さを指定しますが、CSS で制限します。
- 3さまざまなサイズについては、srcset / <picture> を考慮してください。
- 4狭い幅 (~360px) でテストして、何も水平方向にスクロールしないことを確認します。
例
Správně
img { max-width: 100%; height: auto; }結論
単一のルール (最大幅:100%、高さ:自動) で、モバイル上のほとんどの画像オーバーフローが解決されます。 CLS の HTML にディメンションを追加し、大きなビジュアルの場合は srcset を検討してください。一般的なモバイルの問題を簡単に解決します。
関連トピック