親divサイズに基づいて画像のサイズを比例的に変更します

Question

ギャラリーから選択した画像を表示するにはブラウザの全角の高さjquery blockUIを使用しています。画像上では、blockUIのビューの構成があります。
基本的に横のビューblockUIの幅と高さは100％に設定されています。
内部にはさらに2つのdivがあります。右は、ビューの80％に設定された幅を持ち、イメージを含んでいます。
画像の幅と高さが100％に設定されています（ただしこれは間違いです）。
ここに表示される画像は、ユーザーがアップロードした元のサイズの画像です。しかし、モニターが1024x768で、アップロードされた画像が600x1900であれば、その画像がスクリーンから出なくなります。
これを修正して、その画像を中央に表示したり、比例させたりするにはどうすればいいですか？

Answer 1

使用max-widthとmax-height、あなたがそれをサポートする必要がある場合はIE 6でJavaScriptを使用する必要があります：まで、サイズ変更時

#blockUI img { 
    max-width: 100%; 
    max-height: 100%; 
} 

これはimg要素の縦横比を保持します最大可能幅と高さ。