css - 画像の幅と高さを比率を維持して 100 x 100 に調整するにはどうすればよいですか?

Question

ここに2つの画像があります

1. 幅:300px、高さ:200px
2. 幅:200px、高さ:600px

これらの両方を以下のように表示したい

1. 幅:100px、高さ:66.6px
2. 幅:33.3px、高さ:100px

これらは、100px の最大維持率に調整されます。CSSでどのように記述できますか？

Answer 1

これを使って...

image {
    width: 100px;
    height: auto;
}

もちろん、それに応じ<img src="src" style="width:100px; height:auto;">て幅と高さを変更することもできます100px。

Answer 2

以下のようなクラス.resizeを画像に適用すると、必要なことが行われるはずです...

.resize {
    max-width: 100px;
    max-height: 100px;
}

例: http://jsfiddle.net/rU5qK/