【Bootstrap】画像の整列やレスポンシブ対応

Bootstrap

今回は、Bootstrapで画像をあつかう方法について紹介します(^^)



ちなみにダミー画像の用意には、Lorem Picsum というサイトがおすすめです。


下の画像にあるURLを、img 要素の src 属性にコピペするだけでダミー画像を取得できます。




URLの後ろの数字を変えることで画像サイズを自由に変更することもできますよ(・ω・)ノ

<!--こんな感じ-->
<img src="https://picsum.photos/1200/800" alt="">

レスポンシブ対応

img 要素に img-fluid クラスを追加することで画像をレスポンシブにすることができます。

<img src="https://picsum.photos/1200/800" class="img-fluid" alt="">

サムネイル画像

img 要素に img-thumbnail クラスを追加することで、角丸の枠線がつきサムネイルらしい画像になります。

<img src="https://picsum.photos/200/200" class="img-thumbnail" alt="">

画像の整列

Float ユーティリティによる整列

最初の img 要素に float-left クラスを追加して画像を左に配置し、次の img 要素には float-right クラスを追加して画像を右に配置します。

<img src="https://picsum.photos/200/200" class="float-left" alt="">
<img src="https://picsum.photos/200/200" class="float-right" alt="">

Text ユーティリティによる整列

img 要素の親要素に text-center クラスを追加することで画像を中央揃えに配置します。

<div class="text-center">
  <img src="https://picsum.photos/200/200" alt="">
</div>

Spacing ユーティリティによる整列

d-block クラスで img 要素をブロックレベルにし、mx-auto クラスを追加することで画像を中央揃えに配置します。

<img src="https://picsum.photos/200/200" class="d-block mx-auto" alt="">







今回は以上になります。

ご覧いただきありがとうございました(^^)
続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました