画像の書式:Bootstrapコードまとめ
|

Bootstrapのコードを少しずつまとめていきます。
今回は画像の書式です。
画像を親要素の幅に縮小して表示
img要素にclass「img-responsive」を適用します。
レスポンシブデザインなどで用います。
例えば親要素の幅を400pxにすると、画像もwidth400pxとなります。
ただし、親要素の幅より画像が小さかった場合は、実サイズで表示されます。
HTML
<div style="width:400px"> <img src="images/nat001.jpg" class="img-responsive"> </div>
ブラウザでの表示
画像の四隅を角丸にする
img要素にclass「img-rounded」を適用します。
HTML
<div style="width:400px"> <img src="images/nat001.jpg" class="img-responsive img-rounded"> </div>
ブラウザでの表示
画像を楕円形で表示する
img要素にclass「img-circle」を適用します。
HTML
<div style="width:400px"> <img src="images/nat001.jpg" class="img-responsive img-circle"> </div>
ブラウザでの表示
画像の周囲を角丸の枠線で囲む
img要素にclass「img-thumbnail」を適用します。
HTML
<div style="width:400px"> <img src="images/nat001.jpg" class="img-responsive img-thumbnail"> </div>