とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > イメージ

イメージ

イメージ

.img-fluid を指定すると、ウィンドウの広さに応じて自動的に横幅が調整されるレスポンシブ画像とすることができます。

Sample
Code
<img src="1024x40.png" class="img-fluid">
<img src="1024x40.png" class="">

イメージサムネイル

.img-thumbnail を指定すると、画像の周りに .25rem の枠線を描画します。

Sample
Code
<img src="80x80.png" class="img-thumbnail">

ラウンド

.rounded を指定すると、画像の角を丸くします。

Sample
Code
<img src="80x80.png" class="rounded">

左寄せ・右寄せ

.float-left, .float-right は画像を左寄せ、右寄せします。テキストの回り込みが行われるので、回り込みを解除するには .clearfix を指定します。

Sample
Code
<div class="clearfix">
  <img src="80x80.png" class="float-left">
  <img src="80x80.png" class="float-right">
</div>

中央寄せ

.mx-auto, d-block を指定すると、中央に表示します。

Sample
Code
<img src="80x80.png" class="mx-auto d-block">

Copyright (C) 2015-2018 杜甫々
初版:2015年9月6日 最終更新:2018年6月17日
http://www.tohoho-web.com/bootstrap/images.html