Bootstrap 4 tutorial

コンテント(2): 画像

画像

レスポンシブ画像表示

img.img-fluid を設定すると横幅を親要素に合わせ自動縮小調整する。

img.img-fluid

Responsible image

サムネール用設定

img.rounded は画像の角を丸めて表示 (⇒ 角の丸め )

Rounded image

img.img-thumbnail は幅1pxの角丸ボーダー付きで表示(画像自身は丸めない)

Thumnail image

アラインメント

.float-left, .float-right で画像を左右フローティング表示(⇒ フロート): 後続インライン要素に回り込みが発生する

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.mx-auto (⇒ 空白 )を用いると固定幅ブロックとして自動センタリングする

div にテキスト用アラインメント(⇒ テキスト - アラインメント )を用い、その中に画像を入れてもよい

div.text-left の内部に img

div.text-center の内部に img

div.text-right の内部に img

picture を用いる場合

次の例は幅(ブレークポイント)に合わせて1140×642(xl), 960×540(lg), 720×405(md), 540×304(sm以下)の画像を切り替える。