【Bootstrap:7】イメージのカスタマイズ

イメージの図形

imgタグにクラス名img-図形名をつける。

<img src="http://placekitten.com/200/200" class="img-rounded"/>
<img src="http://placekitten.com/200/200" class="img-circle"/>
<img src="http://placekitten.com/200/200" class="img-thumbnail"/>

出力結果

イメージのレスポンシブ

imgタグにクラス名img-responsiveを付け加える事でデバイスのサイズに沿った大きさになる。

<img src="http://placekitten.com/600/200" class="img-responsive"/>
<img src="http://placekitten.com/600/200" />

出力結果
元画像は両方とも幅600pxでウィンドウサイズも600pxに設定。

↓ウィンドウサイズを600px以下に縮めると...

img-responsive指定してある上の画像は
ウィンドウサイズに合わせて可変するが、レスポンシブに対応してない下の画像は
幅からはみ出てしまっている。