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

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.