imgタグのmax-widthについて

質問

画像(40×30）を領域(20×10）に縦横比を維持したまま縮小する際に
imgタグにstyle="max-width:20px;max-height:10px;"を指定すること
で画像を13×10のサイズで表示することは可能ですか？

また、できない場合はどのような方法を用いるべきでしょうか？

回答No.2

naokita

なぜ、縦横両方を設定出来ないのか分かりませんが、
何か条件付きなのでしょうか・・・
片方だけなら領域に対して画像を　100%で指定する方が良いかも。
safariでダメな環境があるような・・・

補足

縦横両方を指定すると縦横比が崩れるためwidthとheightの両方を指定しない方法を探しています。IEで。

回答No.1

神崎 渉瑠（@taloo）

widthだけを指定、、、のことでしょうか？
<img src="image.jpg" alt="" width="10">

heightだけを指定すると、そのheightに合わせてwidthが調整されます。
<img src="image.jpg" alt="" height="20">
<img src="image.jpg" alt="" height="13">

スタイルシートのmax-widthやmax-heightはやったことがありませんが、たぶんブラウザ依存な気がします。

補足

width属性やheight属性はどちらか一方を指定すればもう片方は調整されるのですが、画像サイズが固定ではないので、どちらを指定するかを判断しなければなりません(下参照)。この判断する処理を省いてmax-widthを使用して実現できるかどうかを教えてもらいたいです。

例）画像サイズ40×30 表示領域　20×10
　　heigthのみを指定

例）画像サイズ80×30 表示領域　20×10
　　widthのみを指定