とほほのBootstrap 4入門

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

レスポンシブイメージ

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

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

イメージサムネイル

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

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

イメージの配置

イメージの配置に関しては フロート などを参照してください。


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