JavaScript dynamically changes page picture size

One of the more common problems when updating articles on your Web site is that the illustrations are too wide to make the entire page distorted. It would be too much trouble if you scaled and inserted each illustration first.

I wrote a period of time before the article encountered this kind of thing, and later with CSS overflow and max-width properties temporarily solve the problem of page deformation. The benefits of this approach are simple, but the downside is the effect of destroying certain details.

such as Overflow:hidden, meaning that when the inner element is wider than the parent frame, the part that is outside the width is hidden. Doing so may be a sudden truncation of some content, being hidden, and very sorry for the audience.

Using the Max-width property to limit the maximum width of an article illustration, you need to consider the compatibility of each browser. IE6 is not supported by this attribute, in my impression, some browsers support this attribute, but the picture is not equal to zoom (like Safari and opera, not remember), this is not fair to the users of these browsers.

So I finally chose to dynamically change the size of the picture through JavaScript. This approach is good for a variety of browsers (it should be very rare for people to disable JavaScript right now?) , if you change the theme, you can also flexibly change the maximum size of the article illustrations.

There are two scenarios, because the theme I'm using is that the jquery library is loaded, so you can do this with the following code:

the following references:


$ (document). Ready (function () {


$ ('. Post img '). each (function () {


var maxwidth = 100; Picture Max width


var maxheight = 100; Picture Max height


var ratio = 0; Scaling


var width = $ (this). width (); Picture actual width


var height = $ (this). Height (); Picture actual height


 


//Check whether the picture is very wide


if (Width > maxwidth) {


ratio = Maxwidth/width; Calculate Scaling


$ (this). CSS ("width", maxwidth); Set the actual display width


height = height * ratio; Calculate the height of proportional scaling


$ (this). CSS ("height", height * ratio); Set the height
after proportional scaling

}


 


//Check whether the picture is very high


if (height > maxheight) {


ratio = Maxheight/height; Calculate Scaling


$ (this). CSS ("height", maxheight); Set the actual display height


width = width * ratio; Calculate the height of proportional scaling


$ (this). CSS ("width", width * ratio); Set the height
after proportional scaling

}


});


});

If you do not want to load the jquery library, you can use the following code:

the following references:


function Resizeimage (image, maximum width of illustration, maximum height of illustration)


{


if (image.classname = = "Thumbnail")


{


w = image.width;


h = image.height;





if (w = 0 | | h = = 0)


{


image.width = maxwidth;


image.height = maxheight;


}


else if (w > H)


{


if (W > maxwidth) image.width = maxwidth;


}


Else


{


if (H > MaxHeight) image.height = MaxHeight;


}


 


image.classname = "Scaledthumbnail";


}


}

Using pure JavaScript, trouble points, need to manually add class= to the picture "Thumbnail", but the final effect is the same.