resize image to browser proportionally checking width and height

Question

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!

You're only changing the image's width... there's no .height() call at the end there. Is that intentional? — Marc B, Nov 17 '11 at 16:25
Example can be found here: http://www.isme.nl/testResize/testResize.html — K B, Nov 17 '11 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, Nov 17 '11 at 16:59
I believe this answer is what you are looking for: http://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window/14696457#14696457 — sebnukem, Feb 04 '13 at 22:07

score 5 · Answer 1 · answered Nov 17 '11 at 16:31

5

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

answered Nov 17 '11 at 16:31

odaa

251
1
13

But then the images will crop, especially with portrait images. – K B Nov 17 '11 at 17:11
1

they do crop if you use some div-tag with "background-image: url('yourimage.jpg');" but when you use the standard html-tag they don't. – odaa Nov 17 '11 at 20:33
But then there's still the scrolling... The idea is that no matter how big or small your browser window is, the image is always maximized to the viewport without scrolling or cropping for both landscape and portrait images. – K B Nov 18 '11 at 10:31

score 2 · Answer 2 · answered Nov 17 '11 at 16:35

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.

score 0 · Answer 3 · answered Aug 16 '12 at 21:20

0

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

answered Aug 16 '12 at 21:20

moala

5,094
9
45
66

Sajan · Answer 4 · 2016-10-15T06:45:34.887

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.com/picture/picture-004.jpg" > </img>
  </body>
 </html>

score 0 · Answer 5 · answered Nov 17 '11 at 16:45

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);

resize image to browser proportionally checking width and height

5 Answers5