经常会遇到这样的问题,图片的宽度会比容器的宽度大而导致页面或者图片变形.
解决办法1:图片的宽度和高度写死.
分析:因为每个图片的高度和宽度比是不一样的,如果写死宽度和高度会造成图片按照非正常比例拉伸或压缩,图片会变形,所以排除这个方法
解决办法2:(亲测,可行)
/* 获取图片的高度和宽度 本来可以用更简单的方法, 例如: jq方式. $("#img_id").attr("width"); js方式.document.getElementById("img_id").offsetWidth; 等等更多其它方法 为何要如此麻烦? 原因:当图片不是本地图片,而是网络图片的时候,你就会发现,上面那段小代码就会获取不到宽度和高度,可以试试 */ function imgLoadEvent(callback, url) {//圖片事件加載 var img = new Image(); img.onreadystatechange = function () { if (this.readyState == "complete") { callback({ "w": img.width, "h": img.height }); } } img.onload = function () { if (this.complete == true) { callback({ "w": img.width, "h": img.height }); } } img.onerror = function () { callback({ "w": 0, "h": 0 }); } img.src = url; } /* 图片按照比例缩放 ImgD 图片对象(jQuery对象), iwidth:允许的最小宽度 iheight:允许的最小高度 */ function DrawImage(ImgD, iwidth, iheight) { imgLoadEvent(function (obj) { //图片按比例缩放 var flag = false; var new_width = obj["w"]; var new_height = obj["h"]; if (new_width > iwidth) {//当图片的宽度大于最大宽度时,才进行缩放 if (new_width > 0 && new_height > 0) { flag = true; if (new_width / new_height >= iwidth / iheight) { if (new_width > iwidth) { ImgD.attr("width", iwidth); ImgD.attr("height", (new_height * iwidth) / new_width); } else { ImgD.attr("height", new_width); ImgD.attr("width", new_height); } } else { if (new_height > iheight) { ImgD.attr("height", iheight); ImgD.attr("width", (new_width * iheight) / new_height); } else { ImgD.attr("height", new_height); ImgD.attr("width", new_width); } } } } }, $.trim(ImgD.attr("src"))); } /*调用范例*/ var img = $("div.sj_show_new img");//找到页面上class='sj_show_new'的DIV下面的所有图片 for (var i = 0; i < img.size(); i++) {//循环缩放 var o = $(img[i]); DrawImage(o, 600, 500);//指定最大宽度和高度,最大宽度原则上应以图片容器DIV的宽度为上限 }