页面载入中,请稍候...

图片超出大小,按指定宽度等比缩放

2012-05-20 13:10:02    作者:user    来源:会员投稿    评论:读取中    点击:读取中    [我要投稿]

这个是JQURY获取的元素标签,需先引入JQ库文件,也可以直接用JS获取,for循环遍历,原理一样。<script type=text/javascript> //等比缩放...

这个是JQURY获取的元素标签,需先引入JQ库文件,也可以直接用JS获取,for循环遍历,原理一样。

<script type=”text/javascript”>
 //等比缩放大图
 $(function(){
//页面ID为content区中所有图片
 $("#content img").each(function(){
    var old_width = $(this).width();            //原始宽
 var old_height = $(this).height(); //原始高
  //图片宽度超出650,按等比缩放
    if(old_width > 650){
    var new_width = 650;
    var new_height = old_height * (new_width / old_width);
    $(this).width(new_width);
    $(this).height(new_height);
 }
 });
 });
</script>

另外一例:

//如果图片超过了div设定宽高,就调整图片大小  
    $(document).ready(function() {  
           initImageSize("picDiv",240,160);  
    });  
      
           //idName为图片img所在的父节点的ID  
           //maxWidth最大宽度,maxHeight最大高度   
    function initImageSize(idName,maxWidth,maxHeight){  
            $('#'+idName+' img').each(function() {  
        var maxWidth = maxWidth; // 图片最大宽度  
        var maxHeight = maxHeight;    // 图片最大高度  
        var ratio = 0;  // 缩放比例  
        var width = $(this).width();    // 图片实际宽度  
        var height = $(this).height();  // 图片实际高度  
        // 检查图片是否超宽  
        if(width > maxWidth){  
            ratio = maxWidth / width;   // 计算缩放比例  
            width=maxWidth;  
            $(this).css("width", maxWidth); // 设定实际显示宽度  
            height = height * ratio;    // 计算等比例缩放后的高度   
            $(this).css("height", height);  // 设定等比例缩放后的高度  
        }  
        // 检查图片是否超高  
        if(height > maxHeight){  
            ratio = maxHeight / height; // 计算缩放比例  
            height=maxHeight;  
            $(this).css("height", maxHeight);   // 设定实际显示高度  
            width = width * ratio;    // 计算等比例缩放后的高度  
            $(this).css("width", width);    // 设定等比例缩放后的高度  
        }  
    });  
    }  

再送上插件一枚,望各位看官笑纳:

// jQuery.imgAutoSize.js
// Tang Bin - http://planeArt.cn/ - MIT Licensed
(function ($) {

	var loadImg = function (url, fn) {
		var img = new Image();
		img.src = url;
		if (img.complete) {
			fn.call(img);
		} else {
			img.onload = function () {
				fn.call(img);
				img.onload = null;
			};
		};
	};

	$.fn.imgAutoSize = function (padding) {
		var maxWidth = this.innerWidth() - (padding || 0);
		return this.find('img').each(function (i, img) {
			loadImg(this.src, function () {
				if (this.width > maxWidth) {
					var height = maxWidth / this.width * this.height,
						width = maxWidth;

					img.width = width;
					img.height = height;
				};
			});
		});
	};

})(jQuery);

调用方法:

jQuery(function ($) {
	// .imgWrap这个是图片外部容器,使用了本插件后超大的图片宽度将会限制在容器宽度
	// 如果要控制图片与容器的边距,如20像素: $('.imgWrap').imgAutoSize(20);
	$('.imgWrap').imgAutoSize();
});
本文版权声明: 转载文章,有少量修改。如果本文或软件侵犯了您的版权,请告之网站管理员。

相关热词搜索:限制图片最大宽度  

上一篇:兼容所有浏览器的CSS3圆角(CSS+Javascript)
下一篇:CSS的权重

分享到: 收藏