レスポンシブサイトでPC用画像とスマホ用画像を切り替えたい場合が多々あります。
Bootstrap4ではクラスを指定するだけで実現可能です。
便利ですね！
例えば画面サイズが「md〜xl」の時はPC用の画像を表示したい場合は「d-none」と「d-md-block」の2つのクラスを指定するだけでOKです。
|
1 2 3 |
<div class="col-12 d-none d-md-block"> <img src="https://goo.gl/yZyhZE" /> </div> |
「xs〜sm」の時にスマホ用の画像を表示したい場合は「d-md-none」を指定します。
|
1 2 3 |
<div class="col-12 d-md-none"> <img src="https://goo.gl/vJjbjE" /> </div> |
サンプルも作りましたので良ければ見てくださいね。
画面サイズによってPC用の画像とスマホ用の画像が切り替わるはずです。
Bootstrap4からはクラスの指定方法が変わった様でなかなか覚えにくくなっています。
分かりやすく一覧表示にしました。
「class名」のクラスを指定すると「x」が付いている画面サイズの時に表示されます。
ついでに画面サイズの一覧も載せておきますね。
| 名称 | 領域サイズ |
|---|---|
| xs | 0px〜575px |
| sm | 576px〜767px |
| md | 768px〜991px |
| lg | 992px〜1199px |
| xl | 1200px〜 |
| class名 | xs | sm | md | lg | xl |
|---|---|---|---|---|---|
| d-none d-sm-block | x | x | x | x | |
| d-none d-md-block | x | x | x | ||
| d-none d-lg-block | x | x | |||
| d-none d-xl-block | x | ||||
| d-sm-none | x | ||||
| d-md-none | x | x | |||
| d-lg-none | x | x | x | ||
| d-xl-none | x | x | x | x | |
| d-block d-sm-none d-md-block | x | x | x | x | |
| d-block d-md-none d-lg-block | x | x | x | x | |
| d-block d-lg-none d-xl-block | x | x | x | x | |
| d-block d-xl-none | x | x | x | x | |
| d-block d-sm-none | x | ||||
| d-none d-sm-block d-md-none | x | ||||
| d-none d-md-block d-lg-none | x | ||||
| d-none d-lg-block d-xl-none | x | ||||
| d-none d-xl-block | x |
[…] 参考サイト Bootstrap4 PCとスマホで画像を切り替える方法 […]