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 has encountered this kind of thing, later with CSS overflow and max-width properties temporarily solve the problem of page deformation. The advantage of this method is simple, but the disadvantage is that it will destroy the effect of some 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, my final choice is 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:

$ (document . Ready (function () { $ ('. Post img '). each (function () { var maxwidth = 100;//Picture Max width var maxheight = 1 00; Picture maximum height var ratio = 0; Zoom var width = $ (this). width (); Picture actual width var height = $ (this). Height (); The actual height of the picture   //Check whether the picture is very wide if (Width > maxwidth) { ratio = maxwidth/width; Calculates the scaling $ (this). CSS ("width", maxwidth);//Set the actual display width height = height * ratio; Calculates the height of the proportional scaling $ (this). CSS ("height", height * ratio); Set the height of equal scaling }   //Check whether the picture is very high if (height > maxheight) { Ratio = Maxheight/heig Ht Calculates the zoom scale $ (this). CSS ("height", maxheight); Set the actual display height width = width * ratio; Calculates the height of the proportional scaling $ (this). CSS ("width", width * ratio); Set the height of equal scaling } }); });

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

The following are the referenced contents: 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.