根据父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元素的宽高比，最大可能的宽度和高度。