解 説

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

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

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

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

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

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

HTMLコード

CSSコード

原因と解決策

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

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

CSSコード