CSS to Image Resize based on screen resolution

I want to resize an image based on the screen resolution. For instance, if a user resizes their browser, or it is a mobile device, etc.

I can do it with this style on the IMG tag:

.ProfileImage {
    min-width: 100%;
    height: auto;
}

Select allOpen in new window

And put a max-width on a panel (div) box around the image. But that ONLY resizes the image if my starting width is larger than the image itself. Then it resizes the image to the actual width of the image as I drag the browser smaller.

I want to shrink the image as the page gets smaller, even if the image is large to begin with.

How do I do that? I am using asp.net as well, if that helps to make this happen.

thanks.