Bootstrap4の画像で使用できる基本的なクラスをまとめました。
各クラスはimgタグに付加するだけで効果が発揮されます。
基本的なクラスは以下の4種類です。
Bootstrap4 画像用クラス
- レスポンシブクラス
- サムネイルクラス
- 角丸クラス
- ブロッククラス・中央寄せクラス
サンプルを作りましたので見てくださいね。
1. レスポンシブクラス（img-fluid）
「img-fluid」をimgタグに付けるだけでレスポンシブ対応の画像になります。
画面幅を小さくしていくと画像も小さくなります。
|
1 2 3 4 5 6 |
<div class="row"> <div class="col"> <p>1. レスポンシブクラスを指定している画像</p> <img class="img-fluid" src="http://clue-design.com/wp-content/uploads/2017/11/cat2" /> </div> </div> |
2. サムネイルクラス（img-thumbnail）
「img-thumbnail」を追加すると画像に枠線が追加されます。
写真の様な見た目になってオシャレですね。
元画像加工の必要も無いので、少し装飾したい時に便利です。
|
1 2 3 4 5 6 |
<div class="row"> <div class="col"> <p>2. サムネイルクラスを指定している画像</p> <img class="img-thumbnail" src="http://clue-design.com/wp-content/uploads/2017/11/cat3" /> </div> </div> |
3. 角丸クラス（rounded）
「rounded」を追加すると角丸の画像になります。
地味な効果ですが、サイトの印象が柔らかくなりますよね。
|
1 2 3 4 5 6 |
<div class="row"> <div class="col"> <p>3. 角丸クラスを指定している画像</p> <img class="rounded" src="http://clue-design.com/wp-content/uploads/2017/11/cat4" /> </div> </div> |
4. ブロッククラス・中央寄せクラス
「mx-auto」「d-block」を追加するとブロック要素となり画像が中央寄せされます。
|
1 2 3 4 5 6 |
<div class="row"> <div class="col"> <p>4. ブロッククラス・中央寄せクラスを指定している画像</p> <img class="mx-auto d-block" src="http://clue-design.com/wp-content/uploads/2017/11/cat5" /> </div> </div> |
どれもクラスを追加するだけの簡単設計になっています。
使いこなしてサイト制作時間の短縮を目指しましょう！
今回のサンプルも見てくださいね。
