img要素のheight:autoの指定（IE8対応）＠CSS

レスポンシブWebデザインとか（その他の場合でも）でimg要素の実際のサイズ（width, height）をcssで上書きしてデバイスサイズや親要素の大きさに対応させる場合があります。（別にimg要素のwidth, heightの指定を上書きでない場合でも）

幅を指定して（%による相対指定やpxによる絶対指定で）高さについては縦横比を保ってお任せ（auto）する例だとcssで対象要素に対して以下を指定します。

.w_middle img{
max-width:180px;
height:auto;
margin-bottom:10px;
}

が、これだとIE8で表示がおかしくなります。img要素にwidth, heightが指定されていなければいいんですが、それがあった上で上記のcssの指定（height:auto）をすると、幅はいいんですが高さがびみょーんとなります。

これを解消するにはcssの記述にwidth:autoを追加します。

.w_middle img{
max-width:180px;
height:auto;
width:auto; /* for ie8 */
margin-bottom:10px;
}

これが必要になった案件ではWordPressを使った構築だったので、最初はfunctions.phpに埋め込み画像にwidth, heightを出力しない設定をして対応しようかと思ったんですが、それはそれで必要な他のところに影響が出てしまうのでcssでの対応にしました。

他にもレスポンシブWebデザインによる実装に役立ちそうなプロパティのtipsは以下で紹介されています。

coliss.com