图像自动适合容器的身高和体重

我发现很好的jquery插件，自动缩放图像到容器上的浏览器屏幕的重量。但我需要通过身高来缩放。任何想法如何用jQuery或css来做到这一点？谢谢。图像自动适合容器的身高和体重

示例（仅由重量比例）

jsfiddle.net/nottrobin/9Pbdz/

2013-10-13 abrahab

通过在图像元素上设置100％的宽度，浏览器会自动处理高度比例。无需任何JS或明确的高度设置。

img { 
    width: 100%; 
}

您可以通过父元素上设置明确的高度，然后设置高度达到同样的自动缩放“高度方向”：100％;在嵌套的图像元素上。不要在图像上设置宽度以保持其比例。

div { 
    height: 100px; 
} 
img { 
    height: 100% 
}

动态图像高度可以按照相同的原理来实现。以下是一个基于窗口高度给出父元素动态高度的示例。然后图像填充其父项的高度并适当缩放。

这应该让你接近一个完整的例子：

2013-10-13 22:53:11

感谢，用jQuery第二个例子几乎是我想要的，但它只能通过窗口的高度是一个规模。图像可以同时由窗户和高度缩放？ – abrahab

或者修改原始'imagefit'代码并添加高度功能是个好主意？ 'http：// jquery-imagefit-plugin.googlecode.com/svn/trunk/jquery.imagefit-0.2.js' – abrahab

其中一个或另一个应该照顾大多数情况，除非你有一些非常独特的事情发生，无论是按高度缩放（如上例所示），或者简单按宽度（http://jsfiddle.net/9Pbdz/83/）就足够了。 –

设置DIV含有专门的身高和体重，然后设置css类的尺寸图像的高度：100％和宽度：100％

2013-10-13 22:40:36 Jay

回答