画像表示をレスポンシブ対応にする bootstrap


スポンサーリンク

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

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

+toc

bootstrap の導入の仕方


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

bootstarp の画像クラス



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



bootstrap 画像表示のタイプ


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

img-rounded : 角丸
img-circle : 丸
thumbnail : 縁取り

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

 


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

 

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



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

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

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

 

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

 

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

 



スポンサーリンク