javascript dynamically adjust image size implementation code_image special effects

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.

Such as overflow: hidden, which 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 options. Since the theme I am using is loaded with the jQuery library, it can be implemented with the following code:

Copy code The code is as follows:

$(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 width of the image
var height = $(this).height(); // Actual height of the image
// Check whether the image is super wide
if(width > maxWidth){
ratio = maxWidth / width; // Calculate the scaling ratio
$(this).css("width", maxWidth); // Set the actual display width
height = height * ratio; // After calculating the equal scaling The height of
$(this).css("height", height * ratio); // Set the height after proportional scaling
}
// Check whether the image is super high
if( height > maxHeight){
ratio = maxHeight / height; // Calculate the 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 equal scaling
}
}) ;
});

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

Copy code The code is as follows:

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";
}
}

If you use pure JavaScript, it is more troublesome. You need to manually add class="Thumbnail" to the image, but the final effect is the same.