My challenge is to resize images that are typically too large for the current window size, ensuring they fit within 85% of the client window. I tried creating a function utilizing onload and onresize events but encountered issues.
function adjustImages(){
var images = document.getElementsByTagName("img");
var goodWidth = document.body.clientWidth * 0.85;
for(var i=0; i < images.length; i++){
images[i].maxWidth = images[i].width;
if(images[i].width > goodWidth){
images[i].width = goodWidth;
}
if((images[i].width < images[i].maxWidth) && (images[i].width < goodWidth)){
images[i].width = goodWidth;
}
}
}
I apologize for the confusion in my earlier explanation. Let me clarify with an example: Suppose we have images with sizes like 1920x1080, 1280x720, and 640x480. All these images should be resized to fit no more than 85% of the browser window size. Here's how it should work:
For a resolution of 1680x1050:
Image 1: (1680 * 0.85) x (1050 * 0.85);
Image 2: 1280x720;
Image 3: 640x480;
For a resolution of 800x600:
Image 1: (1680 * 0.85) x (1050 * 0.85);
Image 2: (1280 * 0.85) x (720 * 0.85);
Image 3: 640x480;
When the resolution increases back to 1680x1050:
Image 1: (1680 * 0.85) x (1050 * 0.85);
Image 2: 1280x720;
Image 3: 640x480;