2011-10-25 10 views
2

画像をアスペクト比(伸縮なし)を維持しながら固定ディメンションに合わせてサイズ変更するようにHMTLとCSSを使用する方法はありますか?HTML/CSS - アスペクト比を維持しながら特定の寸法に合わせて画像を拡大縮小する方法はありますか?

は、64×64ピクセルの正方形であることを私に必要な大きさを考慮して、画像のための次のような場合は、私がこの次元に収まるようにしたい:

  1. 64×64ピクセルの画像
  2. 画像96ピクセル、幅135個のピクセル高い
  3. Iが解決する方法のいずれか1 & 2又は1を把握することができました

高い135個のピクセル、96個のピクセル幅画像3明示的にイメージのheight="64px"width="64px"を明示的に宣言していますが、どちらも両方では機能しません。両方とも宣言すると、画像が伸縮します。

この問題はHTMLとCSSを使用して解決する方法はありますか?

答えて

3

では、代わりにmax-widthとmax-heightを使用します。 CSSの幅と高さを設定しないでください。

style="max-width: 64px; max-height: 64px;" 
+1

うわー、私は正直にそれを試みたと思った。迅速かつ明らかに解決していただきありがとうございます。 – Wex

+0

heh glad to help;) – galchen

+0

@Wex: 'max-width'はIE8では動作しません。画像は最大幅のサイズを表示しますが、実際の幅を占めます。水平の長方形の画像で試してみてください'max-height:60px; max-width:80px; 'こちらもhttp://reference.sitepoint.com/css/max-width#で説明されています –