Making an IMG 100% of the viewable height

Topic

New Reply

It works in Firefox, but not in IE6.

In theory, using height=”100%” in an IMG tag will make the image as tall as its container. In my document, the container is a DIV tag that also has its height set at 100% (in CSS):

In FF, whether the window is “restored” or “maximized” or “full screen,” the image is scaled to fit vertically — exactly what I want. In IE, on the other hand, I get vertical and horizontal scroll bars.

Any idea what is wrong with or missing from the above HTML? Other than complicated math and event procedures in JavaScript, any ideas on how to force IE to scale the image to the viewable window size?

Reply | Quote

Replies

This isn’t a “real” answer, but newer versions of IE have the “Enable Automatic Image Resizing” choice in Internet Options. How does that affect the sizing cocktail?

Reply | Quote

Not sure if this is causing your problem, however its worth a look (http://webdesign.about.com/cs/css/a/aaboxmodelhack.htm) Cheers Graham.

Reply | Quote

Thanks guys.

> newer versions of IE have the “Enable Automatic Image Resizing” choice in Internet Options

It works if the URL is to the JPG, but I guess my page code is overriding the automatic resizing. Hmmm…

> (Box model hack)

This is a new approach! However, it is targeted toward a few pixels this way or that, and so for this problem, I need stronger medicine.

Reply | Quote

Apparently there are some hidden filters in IE6, one of which is zoom. I had never heard of these until I tripped over them this morning, maybe this will help with your problem. (http://www.webmasterworld.com/forum83/4179.htm) .

Reply | Quote

It’s a useful “extension” to CSS for end-user control, but from what I can tell from playing with it, it doesn’t automate the resizing, so I’d still have to do “JavaScript math,” which I’m hoping to avoid…

Sample page:

function zoomBody(strUpDown)
{
  var elBody = document.getElementById("bod");
  var numZoom = 1 * (elBody.style.zoom);
  if(strUpDown=="up") {
    elBody.style.zoom = "" + (numZoom + 0.1);
  } else {
    elBody.style.zoom = "" + (numZoom - 0.1);
  }
}



This is in h2 style


This is an ordinary paragraph



Try it out: Increase zoom or 
Decrease zoom

Microsoft has a much fancier one that I saw later (it also shows the better way to coerce a string to a numeric value in JavaScript).

Reply | Quote

Hi – so it zooms IE, but FF doesn’t respond. Is that what you expected?

Reply | Quote

I’m not sure I follow your question. ???

FF was working as I wanted, but IE wasn’t. I gave up on fixing the problem for the moment, I’ve been too busy with PowerPoint stuff to deal with the web pages (which are a backup for people who don’t have or don’t want to use PowerPoint).

Reply | Quote

The TABLE tag’s HEIGHT attribute? Hmmm… It seems that the W3C hasn’t added this to the specification, so that might be why I had overlooked it before.

This code doesn’t have any effect. Did I mention I was using an XHTML 1.1 Transitional tag? I think the parsing problem may relate specifically to this type of document. When I invoke Quirks mode by replacing these lines with a simple tag —

— it works almost exactly the way I had intended. Whether there is a bug in IE or a problem with my code relative to the XHTML spec, I don’t know.

Reply | Quote