根据父div大小按比例调整图像大小 [英] Proportionally resize image based on parent div size

问题描述

我使用完整的浏览器宽度高度jquery blockUI显示从图库中选择的图像。在图片下方是blockUI中的视图方案。

基本上，在sideblockUI中查看宽度和高度设置为100％。

里面还有两个div。右侧宽度设置为视图的80％，并且包含图片。

图片宽度和高度设置为100％（但我错了，我知道）。

图片我在这里显示的是用户上传的原始尺寸的图片。但是如果显示器是1024x768和上传的图像是600x1900我不知道那个图像出来的屏幕。
那么我该如何解决这个问题显示该图像居中和比例？

>

< div-class =h2_lin>解决方案

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

  #blockUI img {
 max -width：100％; 
 max-height：100％; 
} 
  

这会保留 img 元素的宽高比，最大可能的宽度和高度。

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?

解决方案

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

#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.

这篇关于根据父div大小按比例调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！