A recent post on the [TechNet][technet] mailing list posed an interesting question:
>When displaying an image in a web viewer, is there any way to scale the image to fit?
Of course container fields have this ability built right in (by way of the Format -> Graphic command). But there are several reasons you might want to show pictures in a web viewer instead. Most notably, the images might already be on a web site. There’s no reason to copy them into the FileMaker database too, wasting space and adding more to your already busy schedule. Is there any way to give web viewers container-like scaling ability?
To use this in your own systems, copy the source code into a new file. Name it “scale-image.html” (or anything you want) and put it on your web server. To show a properly scaled image in a web viewer, you load this web page, and tell it what image to load in the query string (in other words, add a question mark and then the image URL to the end of the page URL). Sounds complicated, but really it isn’t. Here are a few examples:
— load an image with a complete URL like this:
— if the image is on the same web server, you can simplify:
— and things get even easier if the images are in the same folder as the page:
Of course you can use any image type your browser supports: You’re not limited to JPEGs. Finally, note that this page only works properly if the web viewer itself is perfectly square (ie: 120px by 120px or 300px by 300px). Use the Object Info pallette (View -> Object Info) to easily size your web viewer. If there is enough interest, I can revise the code to work in web viewers with any aspect ratio.
## How Does it Work?
First, you see a pretty typical top-of-the-page. We declare the version of HTML we’re using, and start the page as normal.
The first important bit is this:
This embedded CSS stylesheet tells the web viewer a few important things:
1. The page body should have no margin or padding. In other words, we want the contents of the page to push right up to the edge of the web viewer, with no gap. Normally, page content is indented a little on all sides, but we want our image to fill things up completely.
2. Images should be `display: block`. This makes it possible for us to size and position the image precisely.
3. On the top and bottom, the image should have no margin, and the right and left margin should be `auto`. In other words, the image should start at the very top of the web viewer and it should center itself right-to-left.
In CSS, if we set just the *width* of the image to `100%` then the image will automatically be scaled so it is exactly the width of the web viewer. If you *don’t set the height at all* then the web viewer will keep the image’s aspect ratio. In other words, it will let the image be as tall as it needs to be so it doesn’t look squished. Likewise, if we set just the *height* to `100%`, the width will scale accordingly. All we need to do is decide if the image should be just as wide as the web viewer, or just as tall.
If you think about it for a minute, you’ll agree that this depends on whether the image is taller than it is wide, or wider than it is tall. A tall image will fill the web viewer from top to bottom, and won’t be quite as wide as the web viewer itself. A wide image, on the other hand, will fill it from right to left, and be a little shorter.
So this function first get ahold of the image, storing a reference to it in a variable called `img`. It looks at the `offsetHeight` and `offsetWidth` of the image (these are just funny ways to refer to its height and width). If the height is bigger, it sets the height to `100%`. If the width is bigger, it sets the width to `100%` instead.
Remember though that this function is only defined at this point. We haven’t actually run the code yet. The reason is simple: the image doesn’t exist yet. Next, the HTML looks like this:
This sample was thrown together quickly, so it has room for improvement. To whit:
– The web viewer has to be square. It would be better if it inspected the page size and adjusted its decision making accordingly, so it could scale an image in any size web viewer.