首页 > 代码库 > js实现图片的大小自适应效果
js实现图片的大小自适应效果
需求是传过来一个图片,根据外层div的大小自动进行缩放效果。
function ShowSecondImg(v) { var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例 var imgW, imgH; var centerW = $(window).width() - $("#alarmQueue").width() - $("#presInfo").width() - 40; var centerH = $(window).height() - $("#detailedInfor").height()-148; $("#imgBoxs").find("#second").remove(); var img = $(‘<img/>‘, { src: v.First_frame_image_url, "id": "second" });//v.First_frame_image_url img.prependTo(‘#imgBoxs‘); imgW = img.width(); imgH = img.height(); //获取的参数 var rectX= parseInt(v.facerect.x); var rectY =parseInt(v.facerect.y); var rectWidth =parseInt(v.facerect.w); var rectHeight =parseInt(v.facerect.h); // alert(v.facerect.x); //var i = (centerW / 16 - centerH / 9) > 0 ? 0 : 1; var i= (centerW/centerH - imgW/imgH ) > 0 ? 0 : 1; if (i == 1) { //如果窗口宽不长,高长。以宽为准。 rate = imgW / centerW; var imgRateH = imgH / rate; //img real rate height; newX = rectX / rate newY = rectY / rate; newW = rectWidth / rate; newH = rectHeight / rate; $("#imgBox").width(centerW); $("#imgBox").css("height", "100%"); $("#second").css({ "width": centerW, "height": imgRateH }); } else if (i == 0) { //如果窗口宽足够长,高不长。以高为准。 rate = centerH / imgH; var imgRateW = imgW * rate; //img real rate width; var leftsideW = (centerW - imgRateW) / 2; //leftside add rightside width; newX = rectX * rate + leftsideW; newY = rectY * rate; newW = rectWidth * rate; newH = rectHeight * rate; $("#imgBox").height(centerH); $("#imgBox").css("width", "100%"); $("#second").css({ "width": imgRateW, "height": centerH }); } // $("#detailedInfor").height($(".container").height()-centerH); $("#faceDiv").attr(‘style‘, ‘display:block;top:‘ + newY + ‘px;left:‘ + newX + ‘px;width:‘ + newW + ‘px;height:‘ + newH + ‘px‘); }
js实现图片的大小自适应效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。