画像

レスポンシブ画像表示

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

img.img-fluid

サムネール用設定

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

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

アラインメント

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

.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以下)の画像を切り替える。

構造

• picture
  • source 属性
    • 属性 media="(min-width: 1200px)"
    • 属性 srcset="../img/1140x642.svg"
  • source 属性
    • 属性 media="(min-width: 992px)"
    • 属性 srcset="../img/960x540.svg"
  • source 属性
    • 属性 media="(min-width: 768px)"
    • 属性 srcset="../img/720x405.svg"
  • img.img-fluid 属性
    • 属性 src="../img/540x304.svg"