画像の書式：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>

ブラウザでの表示