Bootstrap学習ノート1

<img src="..." class="img-responsive" alt="     ">

img-responsive classを追加することで、Bootstrap 3の画像の応答レイアウトのサポートをより友好的にすることができます.
次に、このclassに含まれるcssプロパティを見てみましょう.
次のコードでは、img-responsive classがmax-width:100%を画像に付与していることがわかります.とheight:auto;を選択します.

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

これは関連画像がinline−blockとして現れることを示している.エレメントのdisplayプロパティをinline-blockに設定すると、エレメントはその周囲のコンテンツに対してインライン形式で表示されますが、インラインとは異なり、幅と高さを設定できます.
height:autoを設定します.関連要素の高さはブラウザによって異なります.
max-widthを100%に設定すると、widthプロパティで指定した幅が書き換えられます.これにより、画像の応答レイアウトのサポートがより友好的になります.
 
 
 
display:inline、block、inline-blockの違い
display:blockは要素をブロックレベルの要素として表示する.
block要素の特徴は、常に新しい行で始まることです.高さ、行の高さ、頂部と底辺の距離を制御できます.幅のデフォルトは、幅