メインビジュアルを画面幅すべてを使って表示させたい時があります。
Bootstrap4では、以下のように簡単に実現可能です。
HTML Bootstrap4 画像を全画面に表示（レスポンシブでwidth100%）
|
1 2 3 4 5 6 7 |
<div class="container-fluid"> <div class="row"> <div class="col no-gutters"> <img class="img-fluid" src="https://goo.gl/rc66fr"> </div> </div> </div> |
[1行目]
画面幅全てを使うので「container」では無く「container-fluid」クラスを設定します。
[3行目]
colの隙間を無くすため「no-gutters」クラスを設定します。
※CSSを参照してください。
[4行目]
画像をレスポンシブにするために「img-fluid」クラスを設定します。
CSS Bootstrap4 画像を全画面に表示（レスポンシブでwidth100%）
|
1 2 3 4 5 6 7 8 9 10 |
.no-gutters { margin:0; padding:0; } .no-gutters > .col, .no-gutters > [class*="col-"] { margin:0; padding:0; } |
「col」の余計な空白を取り除くためのクラス「no-gutters」を作成します。
「no-gutters」についてはこちらで説明しています。
Bootstrap4は、色々なレイアウトに対応できますので、是非習得しておきたいですね。
See the Pen Bootstrap4 画像を全画面に表示（レスポンシブでwidth100%） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
