根據父div大小按比例調整圖像大小

Question

我使用完整的瀏覽器寬度高度jquery blockUI來顯示從庫中選擇的圖像。 在圖像下面是blockUI中的視圖方案。
基本上在側面塊的視圖中，寬度和高度設置為100％。
里面還有兩個div。 右邊的寬度設置為視圖的80％，它包含圖像。
圖像的寬度和高度設置為100％（但我知道這是錯誤的）。
我在此處顯示的圖像是用戶上傳的原始尺寸的圖像。 但如果顯示器是1024x768並且上傳的圖像是600x1900，那么我不知道該圖像是什么從屏幕上消失。
那么如何解決這個問題來顯示圖像居中和比例？

Answer 1

使用max-width和max-height ，如果需要支持，則需要在IE 6中使用JavaScript：

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

這樣可以在調整大小時保持img元素的縱橫比，最大可能的寬度和高度。