JavaScript dynamically resizes images

A common problem when updating articles on your own website is that the article illustrations are too wide, causing the entire web page to be distorted. It would be too troublesome to scale each illustration before inserting it.

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

For example, overflow:hidden means that when the width of the internal element is greater than the parent frame, the excess width is hidden. Doing so may cause some content to be suddenly cut off and hidden, which is a pity for the audience.

If you limit the maximum width of article illustrations through the max-width attribute, you need to consider the compatibility of each browser. IE6 does not support this attribute. In my impression, although some browsers support this attribute, the images are not scaled proportionally (it seems to be Safari and Opera, I can’t remember clearly). If this is done, it will be harmful to users of these browsers. Very unfair.

Therefore, what I finally chose was to dynamically change the image size through JavaScript. This method has good compatibility with various browsers (very few people would disable JavaScript nowadays, right?), and if the theme is changed, the maximum size of the article illustrations can also be flexibly changed.

There are two solutions. Since the theme I am using is loaded with the jQuery library, it can be implemented with the following code:

$ ( document ) . ready ( function ( ) {
 $ ( '.post img' ) . each ( function ( ) {
 var maxWidth = 100 ; // Maximum image width
 var maxHeight = 100 ; // Maximum height of the image
 var ratio = 0 ; // scaling ratio
 var width = $ ( this ) . width ( ) ; // Actual width of the picture
 var height = $ ( this ) . height ( ) ; // Actual height of the picture

 // Check if the image is super wide
 if ( width > maxWidth ) {
 ratio = maxWidth / width ; // Calculate scaling ratio
 $ ( this ) . css ( "width" , maxWidth ) ; // Set the actual display width
 height = height * ratio ; // Calculate the height after equal scaling
 $ ( this ) . css ( "height" , height * ratio ) ; // Set the height after proportional scaling
 }

 // Check if the image is super tall
 if ( height > maxHeight ) {
 ratio = maxHeight / height ; // Calculate scaling ratio
 $ ( this ) . css ( "height" , maxHeight ) ; // Set the actual display height
 width = width * ratio ; // Calculate the height after equal scaling
 $ ( this ) . css ( "width" , width * ratio ) ; // Set the height after proportional scaling
 }
 } ) ;
 } ) ;

If you don't want to load the jQuery library, you can use the following code:

 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 is a little more troublesome, as you need to manually add class="Thumbnail" to the image, but the final effect is the same.

Original text: Dynamically adjust image size

Thanks bolo for your contribution