javascript 根据父 div 大小按比例调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8133877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Proportionally resize image based on parent div size
提问by 1110
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 来显示图库中的选定图像。下图是 blockUI 中的视图方案。
侧块 UI 中的视图的宽度和高度基本上设置为 100%。
里面还有两个div。右侧的宽度设置为视图的 80%，并且包含图像。
图像的宽度和高度设置为 100%（但我知道这是错误的）。
我在这里显示的图像是用户上传的原始尺寸的图像。但是如果显示器是 1024x768 并且上传的图像是 600x1900，我不知道该图像会从屏幕上消失。
那么我该如何解决这个问题以显示该图像居中和成比例的呢？
回答by Andy E
Use max-widthand max-height, you will need to use JavaScript in IE 6 if you need to support it:
使用max-widthand max-height，如果你需要支持它，你将需要在 IE 6 中使用 JavaScript：
#blockUI img {
max-width: 100%;
max-height: 100%;
}
This keeps the imgelement's aspect ratio when resizing, up to the maximum possible width and heights.
这会img在调整大小时保持元素的纵横比，直到最大可能的宽度和高度。
