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

最后发布: 2011-11-15 09:09:00


问题

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

在此输入图像描述

javascript jquery css jquery-ui css3
回答

使用max-widthmax-height ,如果需要支持,则需要在IE 6中使用JavaScript:

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

这样可以在调整大小时保持img元素的纵横比,最大可能的宽度和高度。