e起飞young
一个前端码农的技术博客
javascript实现图片大小自适应
[ 2016/06/14, 1414阅, 0评 ]

QQ截图20160614210751.jpg

No1.例:指定test容器中的所有图片的大小长宽均不超过180

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{ margin:0; padding:0}
.p1,.p2,.p3{width:180px;height:180px;border:2px solid #393;background:#f00;display:inline-block;margin:20px 0 0 20px;text-align:center;vertical-align:middle}
</style>
<div id="test">
  <p class="p1"><img src="test1.jpg"/></p>
  <p class="p2"><img src="test2.jpg"/></p>
  <p class="p3"><img src="test3.jpg"/></p>
</div>
<script type="text/javascript">
//selector是所有的图片对象
//maxW和maxH分别为指定的最大宽度和最大高度
//"实际宽度和高度"是指源文件的实际宽度和高度
//"显示宽度和高度"是指自适应处理后的宽度和高度,即最终效果
function resizeimg(selector, maxW, maxH) {
	var im = new Image();
	im.src = $(selector).attr('src');
	$(im).load(function () {
		var imgW = im.width;//实际宽度赋值给imgW
		var imgH = im.height;//实际高度赋值给imgH
		if (imgW > maxW || imgH > maxH) {//如果(图片实际宽度 > 指定宽度 或者 实际高度 > 指定高度)否则不做处理
			var ratioA = imgW / maxW;
			var ratioB = imgH / maxH;
			if (ratioA > ratioB) {//当实际长宽比大于指定长宽比
				imgH = maxW * (imgH / imgW);
				imgW = maxW;//此时以指定的宽度作为实际宽度,高度按实际比例由上式计算(不会超过指定高度)
			}
			else {//当实际长宽比小于等于指定长宽比
				imgW = maxH * (imgW / imgH);
				imgH = maxH;//此时以指定的高度作为显示高度,宽度按实际比例由上式计算(不会超过指定宽度);
			}
			$(selector).attr('width', imgW);//替换内容中图片的实际宽度为处理后的显示宽度
			$(selector).attr('height', imgH);//替换内容中图片的实际高度为处理后的显示高度
		}
	})               
}
$("#test img").each(function (index, element) {
		resizeimg(this, 180, 180);//
});
</script>

No2.灵活使用

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
*{ margin:0; padding:0}
.p1,.p2,.p3{width:180px;height:180px;border:2px solid #393;background:#f00;display:inline-block;margin:20px 0 0 20px;text-align:center;vertical-align:middle}
</style>
<div id="test">
  <p class="p1"><img src="test1.jpg" onload="resizeimg(this,180,180);"/></p>
  <p class="p2"><img src="test2.jpg" onload="resizeimg(this,180,180);"/></p>
  <p class="p3"><img src="test3.jpg" onload="resizeimg(this,180,180);"/></p>
</div>
<script type="text/javascript">
//obj是图片对象,this调用方法如上方所示
//maxW和maxH分别为指定的最大宽度和最大高度
//"实际宽度和高度"是指源文件的实际宽度和高度
//"显示宽度和高度"是指自适应处理后的宽度和高度,即最终效果
function resizeimg(obj, maxW, maxH) {
  var imgW = obj.width;//实际宽度赋值给imgW
  var imgH = obj.height;//实际高度赋值给imgH
  if (imgW > maxW || imgH > maxH) {//如果(图片实际宽度 > 指定宽度 或者 实际高度 > 指定高度)否则不做处理
	  var ratioA = imgW / maxW;
	  var ratioB = imgH / maxH;
	  if (ratioA > ratioB) {//当实际长宽比大于指定长宽比
		  imgH = maxW * (imgH / imgW);
		  imgW = maxW;//此时以指定的宽度作为实际宽度,高度按实际比例由上式计算(不会超过指定高度)
	  }
	  else {//当实际长宽比小于等于指定长宽比
		  imgW = maxH * (imgW / imgH);
		  imgH = maxH;//此时以指定的高度作为显示高度,宽度按实际比例由上式计算(不会超过指定宽度);
	  }
	  obj.width=imgW;//替换实际宽度为处理后的显示宽度
	  obj.height=imgH;//替换实际高度为处理后的显示高度
  }
}
</script>

有朋自远方来...评论一下呗O(∩_∩)O

  • 搜索