鄙人对Jquery语法不是非常熟练，写起来跟C#代码差不多，还请包涵。纯属抛砖引玉，欢迎指教.
这个方法可以控制图片的尺寸。在页面显示图片时，如果碰到又细又长或者又细又高的图片比如这种 “—” 和 这种“|”。可已很好的让其在指定大小的容器内，以相应的比例显示。那接下来就看一下吧
/////Jquery图片自适应高度
//// id，图片的ID
//////MaxW，图片允许的最大宽度
////// MaxH，图片允许的最大高度 
function FomartSize(id, MaxW, MaxH) {
var width = $('#' + id).width();////得到图片的宽度
var height = $('#' + id).height();//得到图片的高度
var Maxwidth = MaxW;//获得最大宽度
var Maxheight = MaxH;///获得最大高度
var margnheight;///设置图片距顶部的距离
var newheight;///用来存放图片改变大小后的高度，后面设置据顶高度时会用到
/////判断，如果图片的宽度大于最大宽度或者高度大于最大高度时
if (width > Maxwidth || height > Maxheight) {
///当图片的宽度大于高度时
if (width > height) {
///将图片的宽度设置为允许的最大宽度(img，只要设置了宽度和高度的其中一个，另一个就会自动适应)
jquery在线图片$('#' + id).width(Maxwidth);
//// ///当图片的宽度大于高度时，根据原先图片的宽度与允许最大宽度的比计算出改变尺寸后的图片高度
newheight = height / (width / Maxwidth);
}
////如果图片的高度大于宽度
else {
///将图片的高度设置为允许的最大高度(img，只要设置了宽度和高度的其中一个，另一个就会自动适应)
$('#' + id).height(Maxheight);
////如果图片的高度大于宽度时，其新高度就是允许最大宽度
newheight = Maxheight;
}
}
///如果，图片的高和宽都不大于允许的高和宽
else {
///////保持原有尺寸
$('#' + id).width(width);
$('#' + id).height(height);
///////如果，图片的高和宽都不大于允许的高和宽，其新高度就是原来的高度
newheight = height;
}
//////调整图片距顶部的距离，在显示时可以让图片上下居中,
///因为我原先设置的img的父级容器已经设置了 text-algin：center；所以左右居中就不必了。
/////当图片的高度height ）大于允许的最大高度时，则图片高度在上面的过程中被设置成为了Maxwidth 。
///因此，高度刚好填充满，则margin-top为0
///若要图片居中，margnheight需等于允许的最大高度和图片新高度的差的1/2
margnheight = (Maxwidth - newheight) / 2;
////给图片添加CSS样式
$('#' + id).css("margin-top", margnheight);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。