根据父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在调整大小时保持元素的纵横比,最大可能的宽度和高度.