根据父 div 大小按比例调整图像大小

Question

我正在使用全浏览器宽度高度 jquery blockUI 来显示从图库中选择的图像。下图是 blockUI 中的视图方案。
基本上，侧块 UI 中的视图将宽度和高度设置为 100%。
里面还有两个div。右侧的宽度设置为视图的 80%，并且包含图像。
图像的宽度和高度设置为 100%（但我知道这是错误的）。
我在这里显示的图像是用户上传的原始尺寸的图像。但是，如果显示器是 1024x768 并且上传的图像是 600x1900，我不知道该图像会从屏幕上消失。
那么如何解决这个问题以显示居中且成比例的图像？

Answer 1

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

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

这会在调整大小时保持img 元素的纵横比，达到最大可能的宽度和高度。