根据父 div 的大小等比例调整图片尺寸

Question

我正在使用全浏览器宽高的jQuery blockUI来展示从图库中选择的图片。下面的图片是blockUI视图的示意图。

基本上，blockUI内的视图宽度和高度设置为100%。
里面还有两个更多的div。右侧的宽度设置为视图的80％，其中包含图像。
图像的宽度和高度都设置为100％（但我知道这是错误的）。
我在这里显示的图像是用户上传的原始大小图像。但是，如果监视器是1024x768且上传的图像是600x1900，则不希望该图像超出屏幕。
那么，我应该如何修复此问题以将该图像居中且成比例地显示？

- 1110

Answer 1

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

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

在调整大小时，这将保持img元素的纵横比，最大宽度和高度。

- Andy E