JavaScript dynamic resize

When I update an article on my website, a common problem is that the illustration of the article is too wide, and the entire webpage is distorted. If you scale each illustration before inserting it, this is too much trouble.

I encountered this kind of thing in an article I wrote some time ago. Later, I used the overflow and max-width attributes of CSS to solve the page deformation problem temporarily. The advantage of this method is that it is simple, but the disadvantage is that it will damage some details.

For example, overflow: hidden indicates to hide the section beyond the width when the internal element width is greater than the parent frame. This may cause some contents to be suddenly truncated and hidden. Sorry for the audience.

If you use the max-width attribute to limit the maximum width of an article illustration, you need to consider the compatibility of Each browser. IE6 does not support this attribute. In my impression, Some browsers support this attribute, but the image is not proportional Scaling (it seems like Safari and Opera, but it cannot be remembered ), this is unfair to the users of these browsers.

Therefore, I finally chose to dynamically change the image size through JavaScript. This method has good compatibility with various browsers (should few disable JavaScript now ?), If you change the topic, you can flexibly change the maximum size of the article illustrations.

There are two solutions. Because the jQuery library is loaded on the topic, you can use the following code:

Copy to ClipboardReference: [www.bkjia.com]

$ (Document). ready (function (){
$ ('. Post img'). each (function (){
Var maxWidth = 100; // maximum Image Width
Var maxHeight = 100; // maximum Image Height
Var ratio = 0; // scaling ratio
Var width = $ (this). width (); // Actual Image width
Var height = $ (this). height (); // Actual Image height
 
// Check whether the image is too wide
If (width> maxWidth ){
Ratio = maxWidth/width; // calculate the scaling ratio.
((This).css ("width", maxWidth); // you can specify the actual display width.
Height = height * ratio; // calculate the scaled height.
((This).css ("height", height * ratio); // sets the height after proportional scaling.
}
 
// Check whether the image is ultra high
If (height> maxHeight ){
Ratio = maxHeight/height; // calculate the scaling ratio.
((This).css ("height", maxHeight); // you can specify the actual display height.
Width = width * ratio; // calculate the scaled height.
((This).css ("width", width * ratio); // set the height after proportional Scaling
}
});
});

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

Copy to ClipboardReference: [www.bkjia.com]

Function ResizeImage (image, maximum width and maximum height)
{
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 ";
}
}

If JavaScript is used, you need to manually add class = "Thumbnail" to the image, but the final effect is the same.

Original article: dynamically adjust the image size