スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



画像の書式: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-responsive」を適用

画像の四隅を角丸にする

img要素にclass「img-rounded」を適用します。

HTML

<div style="width:400px">
  <img src="images/nat001.jpg" class="img-responsive img-rounded">
</div>

ブラウザでの表示

img要素にclass「img-rounded」を適用

画像を楕円形で表示する

img要素にclass「img-circle」を適用します。

HTML

<div style="width:400px">
  <img src="images/nat001.jpg" class="img-responsive img-circle">
</div>

ブラウザでの表示

img要素にclass「img-circle」を適用

画像の周囲を角丸の枠線で囲む

img要素にclass「img-thumbnail」を適用します。

HTML

<div style="width:400px">
  <img src="images/nat001.jpg" class="img-responsive img-thumbnail">
</div>

ブラウザでの表示

img要素にclass「img-thumbnail」を適用