画面幅いっぱいの画像の実装例

以下は、異なる方法で画像を表示する例です。

次の画像は画面幅いっぱいに表示されます：

別の方法として、セクション全体を画面幅いっぱいにすることもできます：

それぞれの方法の特徴

• 親要素内での100%幅: コンテンツの流れを乱さずにレスポンシブな画像を表示できます。
• vwユニットを使用した画面幅いっぱい: ページのどの位置からでも画面幅いっぱいに表示できます。
• fullwidth-section: コンテンツが中央配置されている場合でも、セクション全体を画面幅いっぱいにできます。