用jquery等比例控制图片宽高的具体实现

用jquery等比例控制图片宽高的具体实现_jquery

php中文网

发布： 2016-05-16 17:01:46

原创

1072人浏览过

核心代码：

$(function() { 
$(".dvcontent img").each(function() { 
var maxwidth = 520; 
if ($(this).width() > maxwidth) { 
var oldwidth = $(this).width(); 
var oldheight = $(this).height(); 
var newheight = maxwidth/oldwidth*oldheight; 
$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); 
$(this).attr("title","点击查看原图"); 
$(this).click(function(){window.open($(this).attr("src"))}); 
} 
}); 
});

登录后复制

如果上面的代码不能执行，可以使用下面的代码：

$(window).load(function() {
	$(".dvcontent img").each(function() { 
	var maxwidth = 600; 
	if ($(this).width() > maxwidth) { 
	var oldwidth = $(this).width(); 
	var oldheight = $(this).height(); 
	var newheight = maxwidth/oldwidth*oldheight; 
	$(this).css({width:maxwidth+"px",height:newheight+"px",cursor:"pointer"}); 
	$(this).attr("title","点击查看原图"); 
	$(this).click(function(){window.open($(this).attr("src"))}); 
	} 
	}); 
});

登录后复制

通过css还有一种方法兼容IE6能让图片在超过规定的宽度时自动按比例缩小，但该写法不符合W3C标准。代码如下：

.cate img{
    max-width: 600px; 
    height:auto; 
    width:expression(this.width > 600 &#63; "600px" : this.width);
 }

登录后复制

所以在做到尽量兼容IE和其他浏览器以及符合W3C的标准下就通过js来控制图片的宽度了，下面使用jquery控制图片显示时的最大宽度，主代码如下：

phpscup轻量级cms系统1.1 beta GBK

PHPSCUP是一套追求简洁易用很务实的系统！PHPSCUP能满足大多数的初级企业网站用户。系统内置企业简介模块、新闻模块、产品模块、人才模块、在线留言模块、单篇文章模块、友情链接模块、单篇文章模块、图片轮播模块、下载模块。遵循SEO标准，通过模板或者定制为企业提供专业的营销型网站,该系统采用PHP+MySQL组合开发，具备安全、高效、稳定等基本特性。主要功能特色体现在：权限分配：权限分配功能非常

查看详情

$(window).load(function() {
    $(".cate img").each(function() {
        var maxwidth = 600;
        if ($(this).width() > maxwidth) {
            $(this).width(maxwidth);
        }
    });
});

登录后复制

代码很简单，就是cate样式下的所以img的最大宽度只能为600px。.each(function(){......})，each在这里是对指定的图片集合对象逐一调用下面的方法。这种jquery方法在IE6及以上浏览器和chrome及Firefox上都能实现控制图片显示时的最大宽度。