The specific implementation of using jquery to control the width and height of images in equal proportions

The specific implementation of using jquery to control the width and height of images in equal proportions_jquery

WBOY

Release： 2016-05-16 17:01:46

Original

1031 people have browsed it

Core code:

$(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"))}); 
} 
}); 
});

Copy after login

If the above code cannot be executed, you can use the following code:

$(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"))}); 
	} 
	}); 
});

Copy after login

There is also a method through CSS that is compatible with IE6 and allows the image to be automatically scaled down when it exceeds the specified width, but this writing method does not comply with W3C standards. The code is as follows:

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

Copy after login

So in order to be as compatible as possible with IE and other browsers and in compliance with W3C standards, we use js to control the width of the image. Below, we use jquery to control the maximum width of the image when it is displayed. The main code is as follows:

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

Copy after login

The code is very simple, it is in cate style, so the maximum width of img can only be 600px. .each(function(){......}), where each calls the following methods one by one on the specified image collection object. This jquery method can control the maximum width of image display in IE6 and above browsers, chrome and Firefox.