I'm building a fluid website in which an image must scale to a maximum size depending on the viewport of the browser (minus some margins). I don't want the image to crop or lose its original proportions, so depending on the width or height it should resize to the maximum size possible without cropping.

I wrote some javascript code, but since I'm not a hardcore coder I was wondering how to fix this in the right way. The script works, but has a bug when resizing. It seems that it only processes one if statement when resizing the browser window.

function setSizes() {
    var margin_top = 100;
    var margin_right = 85;
    var margin_bottom = 10;
    var margin_left = 85;

    // get image width and height
    var img_w = $('.gallery_img').width();
    var img_h = $('.gallery_img').height();
    // calculate viewport width and height
    var vp_w = $(window).width() - margin_right - margin_left;
    var vp_h = $(window).height() - margin_top - margin_bottom;
    //
    if (vp_w <= img_w || vp_w > img_w) {
        // new width
        var img_w_new=vp_w;
        // calculate new height
        var img_h_new=Math.round((img_h*img_w_new) / img_w);
    }
    //
    if (vp_h <= img_h || vp_h > img_h) {
        // new height
        var img_h_new=vp_h;
        // calculate new width
        var img_w_new=Math.round((img_w*img_h_new) / img_h);
    }
    // change image width and height to new width and new height
    $('.gallery_img').width(img_w_new);
    $('.gallery_img').height(img_h_new);
}

// onload
$(window).load(function(){ setSizes(); });
// on resize
$(window).bind("resize", function() { setSizes(); });

I searched for a solution for quite some time, but most scripts I found only check and change the width.

Does somebody know how to fix this?

Thanx!

I'm building a fluid website in which an image must scale to a maximum size depending on the viewport of the browser (minus some margins). I don't want the image to crop or lose its original proportions, so depending on the width or height it should resize to the maximum size possible without cropping.

I wrote some javascript code, but since I'm not a hardcore coder I was wondering how to fix this in the right way. The script works, but has a bug when resizing. It seems that it only processes one if statement when resizing the browser window.

function setSizes() {
    var margin_top = 100;
    var margin_right = 85;
    var margin_bottom = 10;
    var margin_left = 85;

    // get image width and height
    var img_w = $('.gallery_img').width();
    var img_h = $('.gallery_img').height();
    // calculate viewport width and height
    var vp_w = $(window).width() - margin_right - margin_left;
    var vp_h = $(window).height() - margin_top - margin_bottom;
    //
    if (vp_w <= img_w || vp_w > img_w) {
        // new width
        var img_w_new=vp_w;
        // calculate new height
        var img_h_new=Math.round((img_h*img_w_new) / img_w);
    }
    //
    if (vp_h <= img_h || vp_h > img_h) {
        // new height
        var img_h_new=vp_h;
        // calculate new width
        var img_w_new=Math.round((img_w*img_h_new) / img_h);
    }
    // change image width and height to new width and new height
    $('.gallery_img').width(img_w_new);
    $('.gallery_img').height(img_h_new);
}

// onload
$(window).load(function(){ setSizes(); });
// on resize
$(window).bind("resize", function() { setSizes(); });

I searched for a solution for quite some time, but most scripts I found only check and change the width.

Does somebody know how to fix this?

Thanx!

• javascript
• jquery
• html
• css
• image

• 1 You're only changing the image's width... there's no .height() call at the end there. Is that intentional? – Marc B Commented Nov 17, 2011 at 16:25
• Can you put up a demo someplace? jsFiddle? – Sparky Commented Nov 17, 2011 at 16:25
• 1 Example can be found here: isme.nl/testResize/testResize.html – K B Commented Nov 17, 2011 at 16:45
• If you open the link to the example you can see that it doesn't work if you resize your browser only by changing the width. I switched the positions of the if statements and then it's the other way around. So it seems that it only processes the last if statement... – K B Commented Nov 17, 2011 at 16:59
• I believe this answer is what you are looking for: stackoverflow./questions/6169666/… – sebnukem Commented Feb 4, 2013 at 22:07

5 Answers 5

this might be a lame answer but why don't you just use css width setting? see http://jsfiddle/dXm4r/

I think this is a wrong approach? It would be more natural to define width of enclosing container in percents and than define width 100% on image. Something like this:

    div.img-container {
      width: 30%;
    }

    div.img-container img {
      display: block;
      width: 100%;
    }

    <div class="img-conatiner">
      <img src="...
    </div>

Please pay attention to the fact that in img CSS rule there is no height specified, this will allow browsers to properly scale image without loosing quality.

You have a line to change the width; simply add a line to change the height, based on your height variable. You can figure out what the height should be by dividing the new width by the old width. Basically, that is the multiple of widths in the new width, which is equal to the multiple of heights in the new height. Therefore, if you multiply that number to the old height, you would get the new height.

Here is the equation you could use:

img_h_new = (img_w_new / img_w) * img_h;

And this is the function you could use with your width function:

$('.gallery_img').height(img_w_new);

http://blog.francois-becker/post/2012/08/16/HTMLCSS-container-of-a-maximized-image

you can done it by css ,just apply this css to your image element

.img { /* image*/
    position: absolute;
    top: 10px;
    right: 85px;
    bottom: 10px;
    left: 85px;
    width: calc( 100% - 170px); /* 170 = marging left + right*/
    height: calc(100% - 20px);  /* 20px = marging top + bottomt*/
    background-size: cover;
    box-sizing: border-box;
    padding: 0px;

}
body { /* container*/
    margin: 0px;
    padding: 0px;
    height: 100%
    width:100%;
     overflow:hidden;
}

<html>
  <body>
    <img class="img" src="http://kingofwallpapers./picture/picture-004.jpg" > </img>
  </body>
 </html>