码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现等比例缩放大图片

时间:2015-01-10 23:46:02      阅读:452      评论:0      收藏:0      [点我收藏+]

标签:jquery   等比例缩放   

在页面布局时,有时会遇到大图片将页面容器撑大,超出规定区域,

这时我们就需要将图片按比例缩放,让大图片自适应页面布局。


查看演示http://itmyhome.com/jquery_image_scaling/


1、页面中有如下图片

<img alt="leaf" src="img/leaf.jpg"> 

2、使用jQuery将图片缩放

<script type="text/javascript">
	window.onload = function() {
		var w = 500;//设置最大宽度,也可根据img的外部容器 而动态获得,比如:$("#demo").width();
		$("img").each(function() {//如果有很多图片,使用each()遍历 
			var img_w = $(this).width();//图片宽度 
			var img_h = $(this).height();//图片高度 
			if (img_w > w) {//如果图片宽度超出指定最大宽度 
				var height = (w * img_h) / img_w; //高度等比缩放 
				$(this).css( {
					"width" : w,"height" : height
				});//设置缩放后的宽度和高度 
			}
		});

	}
	$(document).ready(function() {
		//就本例而言 不要用 jQuery中的ready 你懂的...
	})
</script>


jQuery实现等比例缩放大图片

标签:jquery   等比例缩放   

原文地址:http://blog.csdn.net/itmyhome1990/article/details/42551463

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!