Scale down an image if it's too big for the screen

Question

I have an html page where in the middle there is a pic.
Is there a way to scale down the image with javascript in case it's too big for the current monitor resolution?

I mean if a user with a resolution of 1600*1200 open an image of 1900*1200 the image should be scaled down to fit the window.

I can use jquery

Do you really mean "scroll down", or "scale down"? – Widor Oct 18 '11 at 11:29 — Widor, Oct 18 '11 at 11:29

score 5 · Accepted Answer · answered Oct 18 '11 at 12:06

5

Why not just use css?

.imgresize {
    max-width: 100%;
    max-height: 100%;        
}

answered Oct 18 '11 at 12:06

Tetaxa

4,375
1
19
25

Hmm I think this solution got a problem. If someone with an iphone/mobile opens this page, the image will be always scaled down to the max-width of the iphone... hmm =/ – dynamic Oct 18 '11 at 18:09
have you tried it? it will scale to 100% of the parent element. if you don't want it to scale on a small screen try using css media queries http://www.google.com/search?q=css+media+queries – Tetaxa Oct 18 '11 at 18:23

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

Look here: Image resize to fit screen

else: http://jsfiddle.net/jsNDW/1/

HTML

<img src="http://placehold.it/1950x550" class="imgresize">

And JQUERY

var wWidth = $(window).width();
var wHeight = $(window).height();

$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();

    if(imgWidth >  wWidth)
    {
        $(this).width(wWidth);
    }

    if(imgHeight >  wHeight )
    {
        $(this).width(wHeight);
    }

});


$(window).resize(function() {
var wWidth = $(window).width();
var wHeight = $(window).height();

$('.imgresize').each( function() {
var imgWidth = $(this).width();
var imgHeight = $(this).height();

    if(imgWidth >  wWidth)
    {
        $(this).width(wWidth);
    }

    if(imgHeight >  wHeight )
    {
        $(this).height(wHeight);
    }

});

});

edited May 23 '17 at 11:59

Community

1
1

answered Oct 18 '11 at 11:40

Marco Johannesen

13,084
6
31
36

pretty nice even tho it doesn't scale up but i think this is easly fixable – dynamic Oct 18 '11 at 11:49
Do you want it to be fullscreen if its smaller than the screen? – Marco Johannesen Oct 18 '11 at 11:55
@dynamic All you need to do is handle the window resize event and it will scale up. For some reason, jQuery only responds to the view shrinking without explicit instruction. – Abandoned Cart Jul 12 '19 at 03:14

Scale down an image if it's too big for the screen

2 Answers2