Displaying Img to fit available space

pmj7's picture

He has: 234 posts

Joined: Nov 2002

Hi

When coding for Mozilla or Opera, you can use width=100% in an IMG tag and the image will take the available space. That includes being within a table cell, and probably a div as well. Explorer doesn't seem to be as flexible, it simply draws the image at full size.

Anyone know of any tricks to get Explorer to draw an image in the available space - in this case size it down?

I'd like this for the print version of a web page.

Thanks!

Peter

Touchup image processing applet
Pixel Development Web Design, Photography

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

SVG
Flash

pmj7's picture

He has: 234 posts

Joined: Nov 2002

Interesting, but a 2MB download to make things look a bit better on a web page wasn't what I had in mind! Wink

For now, I'm detecting the browser/agent on the .asp page and adjusting the setting accordingly. Spoofers won't get quite as nice a page as they could, but no biggie.

Peter

Touchup image processing applet
Pixel Development Web Design, Photography

Busy's picture

He has: 6,151 posts

Joined: May 2001

set it as a background image

pmj7's picture

He has: 234 posts

Joined: Nov 2002

First of all, backgrounds won't print in Opera or Mozilla (at least in the default settings for the versions I have loaded on my machine). Also, setting an image to background does not allow you to resize it on-the-fly.

Peter

Touchup image processing applet
Pixel Development Web Design, Photography

Busy's picture

He has: 6,151 posts

Joined: May 2001

You didn't say what sort of image, so I assumed you meant a line or something.
Some older browsers print images at full size no matter what size you set it at, depending how the printer is set up, so what you set up and what people get might be totally different.

why not just use a resized image for print page?

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

What the heck are you talking about 2mb, Peter? It's not a Flash presentation, you said one image.

Even then, resizing bitmap images on the fly is never going to look as good as properly resized images being used. If you want it to print, switch it out with CSS for a high-res version. You don't need it to resize on the fly and you shouldn't do it because it causes unsightly distortion and isn't helpful to the user.

IE6 will resize images (and Firefox) if viewed alone and the images are larger than the browser size. Firefox gives the user the ability to click on the image and see the full image.

pmj7's picture

He has: 234 posts

Joined: Nov 2002

I've uploaded the page I'm talking about: http://www.yourvancouver.com/tourism/scienceworld.asp.

The page is designed to give a general overview on a particular site in the city. It's designed to print out on a single 8.5 x 11" page with a plain b&w header logo, the main content, and the right column ads. The idea being that a tourist can find things they're interested in seeing, print out those pages to take with them.

Am I wasting my time considering other paper sizes?

The main content image is 900x200 pixels, and it used as a DIV background for the monitor version of the page. The larger your monitor, the more of the panoramic you see. For the print version, since backgrounds don't get printed, I'm showing it as an IMG. I've found that somewhere between 450-500 pixels works good for a standard 8.5 x 11" printed page, but that doesn't help if you use different size paper. For Opera and Mozilla, I use a size of 100% because those browsers will size the image to fit the available space. Since the image will normally be half it's original size, it should still look good. The absolute defined size (450 pixels) used for Explorer visitors is exactly half it's native size. Instead of causing distortions, you'd think this would make things look better, as monitors have around 100 dpi and printers can go higher. Can't say for certain since I'm b&w for 8.5x11" and my colour printer is much smaller.

Suzanne: When I did a Google search on SVG and tried an Adobe demonstration, it required a 2mb download for the plugin viewer. Not sure what happens when you try and print an image done in Flash, and I'm also not sure I want to open that kettle of fish.

If a visitor has a very old browser and it doesn't look perfect, well that's life. As long as it is useable.

P.S. If you click on the map thumbnail, you'll go to an asp page on the YourVancouver site that loads the Maps.Yahoo.com page. Why? Because over half the time I use that site it fails. The asp loads the page, if it says 'could not find address' it gets loaded again until it does (a few times). Then it shows the page.

Peter

Touchup image processing applet
Pixel Development Web Design, Photography

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

Why would they want the ads?

Yes, I think you're wasting your time thinking about any other paper size. Do you think it's common for people to print to larger paper sizes? I don't actually print websites often, but when I do, I print them to pdf for future reference, which doesn't require much of anything on your side.

If I open my browser full, I get repeat on that image. You might want to set that to not repeat...

http://www.zerocattle.com/examples/images/yourvancouver.jpg

If it's solely for print, it'd be more sensible to replace the image with one that fits, but in this case, I'm not sure that's even necessary -- why do they need the image? To recognize it, perhaps?

Also, re: SVG -- hopefully the plugin will become standard as Flash has. And the quality would suffer, yes. Significantly. SVG and Flash are vector image plugins. For bitmap images, the most sensible and best looking option is to provide the appropriate image in the print stylesheet.

pmj7's picture

He has: 234 posts

Joined: Nov 2002

The present ads are placeholders. The idea is to sell ads site-wide as well as specific to a page. Ads on a Tourism page would be for nearby restaurants and shops that visitors might want to visit. For example, in Stanley Park, the Tea House. Ads pay the bills. If you were a restaurant or shop near a touristy spot, wouldn't you want visitors to wander around with an ad for your business?

I'll turn off the repeat.

If families are printing these pages, the 1" taken by the image seems reasonable to remind them of what it looks like, and perhaps 'sell' (re-sell) the idea of going to young children that can't read.

Regarding sizing-down of images, does the browser use the extra resolution when printing, or does it simply throw it away and show the lower quality image as seen on a monitor?

Peter

Touchup image processing applet
Pixel Development Web Design, Photography

Suzanne's picture

She has: 5,507 posts

Joined: Feb 2000

If you're going to use contextual ads, you should make sure that you have more than just a name or logo there, then, when you print -- make sure the print option contains address and phone number of the place.

I don't do a lot of printing, but if the browser supports print styles, it would choose the right image. If it doesn't, it would choose the image on the page (of course this depends on you putting the image in with CSS in the first place, as a background or img id) -- for the most part, most people aren't expecting photo-quality when they print off websites, eh? Wink

As long as you have a compelling argument for including the image, go right ahead. Same for the ads. Keeping the user in mind will guide you -- the family will have landmark guidance from the photo, food and lodging guidance from the ads, and all the necessary information with which to use this guidance ON the printed page. That's a keeper.

Having ads just because they pay the bills is a poor reason to include them. Having ads because these vendors are in the area and would be of interest to the people visiting (local and out of town "tourists") is a great reason. Just be sure to include something more than a logo.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.