C# program that generates html pages - limit image dimensions on page

Question

I have a C# program that generates a large number of html pages, based on various bits of data and images that I have stored on the file system. The html itself works just fine, but the images can vary greatly in their dimensions. I need a way to ensure that a given image won't exceed a certain size on the page.

The simplest way to accomplish this would be through the html itself... if there was some kind of "maxwidth" or "maxheight" property I could set in the html, or maybe a way to force the image to fit inside a table cell (if I used something like this, I'd have to be sure that the non-offending dimension would automatically scale with the one that's being reduced). The problem is, I don't know much about this "fine tuning" kind of stuff in html, and it seems to be a tough thing to Google around for (most of the solutions involve some sort of html specialization; I'm just using plain html).

Alternatively, I could determine the width and height of each image at runtime by examining the image in C#, and then setting width/height values in the html if the image's dimensions exceed a certain value. The problem here is that is seems incredibly inefficient to load an entire image into memory, just to get its dimensions. I would need a way to "peek" at an image and just get its size (it could be bmp, jpg, gif or png).

Any recommendations for either approach would be greatly appreciated.

Answer 1

There is a width and height property to the <img> tag. If you only specify one, the browser will resize in that dimension and keep the aspect ratio.

Answer 2

CSS has the max-width and max-height properties. They're supported by the newest versions of all popular browsers.

Answer 3

Based on what you're saying (and a couple assumptions, such as you will work with a single image more than once), it seems like caching an image's dimensions in memory would be one thing to do to increase efficiency here. Doing it this way, then you can intelligently set the dimensions in HTML or CSS.

See this question for instructions on how to obtain the resolution (if you don't already know this - unfortunately I know of no way to do this without loading the entire image). I would encourage you to keep that image variable in a very small-scoped area and dispose it ASAP.

I would discourage you from ignorantly using CSS's max-width and max-height properties as you'll lose your aspect ratio.

Answer 4

If you are worried about the program handling the image size recalculation, there is the option of pushing the burden down to the browser. You could use javascript. This script will "resize" an image down to a max height/width of 200 pixels client side.

<script type="text/javascript" language="javascript">
    function img_resizer(img) {
        width = 0;
        height = 0;
        if (img.offsetWidth) {
            resizeImage(img.offsetWidth, img.offsetHeight)            
        }
        else {
            resizeImage(img.style.pixedWidth, img.style.pixelHeight);
        }
    }

    function resizeImage(width, height) {
        if (width > 200 || height > 200) {
            if (width > height) {
                height = (height / width) * 200;
                width = 200;
            }
            else {
                width = (width / height) * 200;
                height = 200;
            }

            img.style.width = width + 'px';
            img.style.height = height + 'px';
        }
    }
</script>

---

<img src="screen.jpg" onload="img_resizer(this)" />

I know that works on IE and Firefox, you might have to do some testing on browsers like Safari, Opera, and Chrome. But I don't know, you might just want to bite the bullet and let the program take care of it.