您的位置:首页 > Web前端 > JQuery

jquery 简单设置图片自适应宽高(不完美)

2016-01-22 09:05 501 查看
需求的时间要求比较急,简单做了一个(基本够用):

function setImgWidthHeight(){
var maxwidth = 800;
var maxheight = 800;
var img = new Image();
img.src =$("#imgShow").attr("src") ;
// 初始化高度和宽度
$("#imgShow").width(img.width);
$("#imgShow").height(img.height);
//高度和宽度设置
//alert(img.width+" "+img.height);
if (img.width > maxwidth) {
$("#imgShow").width(maxwidth);
// 再判断高度
var i = maxwidth/img.width;
var ih = i*img.height; // 计算高度的缩放比例
if(ih>maxheight){
// 如果走到这里则图片会被拉伸
$("#imgShow").height(maxheight);
}else{
$("#imgShow").height(ih);
}
}else{
if (img.height > maxheight) {
$("#imgShow").height(maxheight);
// 再判断宽度
var i = maxheight/img.height;
var iw = i*img.width;
if(iw>maxwidth){
$("#imgShow").width(maxwidth);
}else{
$("#imgShow").width(iw);
}
}
}
}


调用需要在img加载完,否则会出现长和宽都是0的情况:

$(function(){
$('#imgShow').load(function(){
// 加载完成
setImgWidth();
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: