按比例大小调整基于父div大小的图像。

I am using full browser width height jquery blockUI to display selected image from gallery. On the image bellow is scheme of view in blockUI.
Basically view in side blockUI has width and height set to 100%.
Inside there are two more divs. Right has width set to 80% of the view and it contain image.
Image has width and height set to 100% (but this is wrong I know).
Images that I display here are images in original sizes uploaded by users. But if monitor is 1024x768 and uploaded image is 600x1900 I don't what to that image goes out of the screen.
So how can I fix this to display that image centered and proportional?

我使用全浏览器宽度的jquery blockUI来显示从gallery中选择的图像。在图像波纹上是块状视图。基本上视图在侧面块有宽度和高度设置为100%。里面还有两个女主角。Right的宽度设置为80%，它包含图像。图像的宽度和高度设置为100%(但我知道这是错误的)。我在这里展示的图像是由用户上传的原始大小的图像。但是如果显示器是1024x768上传的图像是600x1900我不知道屏幕上的图像是什么。那么我怎么修正这个来显示图像的中心和比例呢?

1 个解决方案

#1

Use max-width and max-height, you will need to use JavaScript in IE 6 if you need to support it:

使用max-width和max-height，如果需要支持，您将需要在IE 6中使用JavaScript:

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

This keeps the img element's aspect ratio when resizing, up to the maximum possible width and heights.

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