フルードイメージで起こる問題点〜画像が縮小されない？？

フルードイメージについて

Googleのモバイルフレンドリー宣言からレスポンシブWebデザインが当たりまえになりつつあります。
レスポンシブ対応にするためは、画像をブラウザの幅に応じて縮小するフルードイメージの仕組みが使われます。
これは簡単で imgに対してmax-width:100%とheight:autoを指定するだけで実現できます。

フルードイメージのスタイル設定

  img {
    max-width:100%;
    height:auto;
  }

フルードイメージの親要素にフロートをかける

フルードイメージの親要素、例えばp要素にフロートをかけると画像が伸縮しなくなります。

フルードイメージの親要素にフロートを設定したサンプル

HTMLコード

<p class="left"><img src="P1000753.jpg" alt="朝日の写真" class="img-responsive"></p>

CSSコード

.img-responsive{
    max-width:100%;
    height:auto;

  }
  .left{
    float:left;
  }

原因と解決策

フルードイメージが伸縮しなくなる原因はフロートにあります。
floatを設定するとブロック要素は包含している内容幅に依存するからです。つまり、この場合はもともとの画像の幅になって固定されます。
解決策はp要素に対してもmax-width:100%とheight:autoを指定します。

問題解決したサンプル
HTMLコード

<p class="img-responsive left"><img src="P1000753.jpg" alt="朝日の写真" class="img-responsive"></p>

CSSコード

.img-responsive{
    max-width:100%;
    height:auto;

  }
  .left{
    float:left;
  }