CSS - prevent image upscaling?

Question

In my CSS, I'm currently using this:

img.info {
    max-width: 620px;
    max-height: 800px;
}

Unfortunately, when my image is smaller than max-width and max-height, it gets upscaled. I thought the standard behavior was that no scaling would occur, but apparently, this is not the case. Is there any way to prevent the image from upscaling?

EDIT: I found the source of the problem, it lies in a totally different part of my program. The code I posted above works just fine. Sorry for this unnecessary post!

Answer 1

i thinkg its working perfectly see here:

http://jsfiddle.net/8XmrF/

Answer 2

It works just fine with the following minimalist example:

<style>
    img.a {
        max-width: 640px;
        max-height: 640px;
    }
</style>

<img src="(my local image file)" class="a">

The image doesn’t get scaled up. Of course, it does if I also add width and height attributes. Therefore, check if you have any other CSS properties that might apply to your image. You can use Firebug to find out exactly which CSS properties apply to your image.

Answer 3

i think i know what you mean. am i assuming correctly that you have a given space and want to fill it with a picture. the picture shouldnt get squeezed or stretched but the space should be filled?

then this may be the first part of your solution:

div.info {
   width: 620px;
   height: 640px;
   overflow: hidden;
}
​
<div class="info"><img class="info" src="http://www.sjphoto.com/hk-web/images/HK-skyscraper.jpg" width=640 /> </div>​

what you now can do is add a onload handler to the image which you pass the desired height which then zooms your image and positions it inside the div, so it gets cropped equally. this could look something like this (untested):

function scaleUp(el,height) {  
    if(el.height < height) {
        var oldwidth = el.width;
        el.deleteAttribute('width');
        el.height=height;
        el.style.marginLeft=((oldwidth-el.width)/2)+'px';
    } else if(el.height > height) {
       el.style.marginTop = '-'+((el.height-height)/2)+'px';
    }
}