レスポンシブに対応したサイトを作るにあたって、最近は、画像のレスポンシブ化はあまり考えなくてもある程度テーマが対応してくれていますので、画像のレスポンシブを bootstrap に頼る必要はない感じがします。が。

bootstrap には画像の表示方法がいくつかあり、面白いもの、使えるものがあるので紹介しておきます。

+toc

bootstrap の導入の仕方

bootstarp の導入方法は、⇒こちら

bootstarp の画像クラス

bootstarp で画像をレスポンシブ対応にする基本形は、以下のように img タグにclass=”img-responsive” を入れるだけです。
<img src="img/picture.jpg" class="img-responsive"><br />

bootstrap 画像表示のタイプ

bootstrap の レスポンシブクラスの基本は、 img-responsive ですが、その表示する形によって以下のクラスを使うことができます。


<img src="img/bootstrap-sample.jpg" class="img-rounded">　<br />
　


<img src="img/bootstrap-sample.jpg" class="img-circle">　<br />
　

<img src="img/bootstrap-sample" class="thumbnail"><br />

自分でクラスを書いてもたいしたことないんですけど、ちょっとした手間を省くにはいいですね。

ちなみにstyleを書くとすると

img-rounded <img src="img/bootstrap-sample.jpg" style="border-radius:3%;">　<br />
　

img-circle <img src="img/bootstrap-sample.jpg" style="border-radius:50%;">　<br />
　

thumbnail <img src="img/bootstrap-sample" style="border:1px solid #ccc;padding:5px;"><br />