CODEWITHSUNDEEP
javascriptimage-resizing
Orange Fox
Orange Fox

Reputation: 147

resize images when resize page

I need to reduce the images are too large for the current window size to the size of 85% of the client window. For this, I created a function that works with events onload and onresize. But something went wrong: (

function a(){
    var img = document.getElementsByTagName("img")
    var goodWidth = document.body.clientWidth*0.85
    for(i=0;i<img.length;i++){
    img[i].maxWidth=img[i].width
                    if(img[i].width>goodWidth){
        img[i].width=goodWidth
    }
    if((img[i].width<img[i].maxWidth) and (img[i].width<goodWidth)){
        img[i].width=goodWidth
    }
            }
    }

I'm sorry about my pure description. Now i will try to fix it: For example, I have an image of this size: 1.1920x1080, 2.1280x720, 3. 640x480. The size of all images should be no more than 85% of the size of the browser window. How it should work:

For resolution 1680x1050:
Picture 1: (1680 * 0,85) x (1050 * 0.85);
Picture 2: 1280x720;
Picture 3: 640x480;
For resolution 800x600:
Picture 1: (1680 * 0,85) x (1050 * 0.85);
Picture 2: (1280 * 0.85) x (720 * 0.85);
Picture 3: 640x480;
When the resolution of the browser window again increase to 1680x1050:
Picture 1: (1680 * 0,85) x (1050 * 0.85);
Picture 2: 1280x720;
Picture 3: 640x480;

Upvotes: 1

Views: 201

Answers (3)

R3tep
R3tep

Reputation: 12864

Maybe Javascript is not the best solution. It's possible to use HTML/CSS only.

Example

   <img width="85%" src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" />

Upvotes: 2

Hristo
Hristo

Reputation: 117

I'd just recommend using jQuery $(window).width() for checking the user browser width (or height) on body finished loading. It is all-browser compatible, and works well.

Here is a not tested idea of a function:

(function(){
    var browserWidth = $(window).width();
    var img = document.getElementsByTagName("img");
    var goodWidth = browserWidth*0.85;
    for(i=0; i<img.length; i++){
        var oldImgWidth = img[i].width;
        if (oldWidth >= browserWidth){
            img[i].width = goodWidth;
            //Don't forget to shrink the height too
            img[i].height *= goodWidth / oldWidth;
        }
    }
}());

Upvotes: 1

Levi Beckman
Levi Beckman

Reputation: 533

I'm not sure if your above is a literal cut & paste, but you are using the word "and" instead of "&" or "&&", and you are not terminating your statements.

Adding those simple tweaks:

function a() {
    var img = document.getElementsByTagName("img");
    var goodWidth = document.body.clientWidth * 0.85;
    for (i=0; i < img.length; i++) {
        img[i].maxWidth = img[i].width;
        if(img[i].width > goodWidth){
            img[i].width = goodWidth;
        }
        if((img[i].width < img[i].maxWidth) && (img[i].width < goodWidth)) {
            img[i].width = goodWidth;
        }
    }
}

Gave me a function that achieved what you described.

Additionally, you may consider adding a parseInt to your goodWidth assignment so that your comparisons are appropriately typed.

var goodWidth = parseInt(document.body.clientWidth * 0.85);

Finally, you should use jQuery, cause it is awesome.

Upvotes: 1

Related Questions