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

Question

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

Answer 1

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

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

这样可以使img元素的宽高比调整时，达最大可能的宽度和高度。