Results 1 to 10 of 10
  1. #1
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Making an IMG 100% of the viewable height

    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):
    <pre><div style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;
    z-index: 1; visibility: visible; text-align: right">
    [img]filename.jpg[/img]
    </div></pre>

    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?

  2. #2
    Platinum Lounger
    Join Date
    Nov 2001
    Location
    Vienna, Wien, Austria
    Posts
    5,009
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Making an IMG 100% of the viewable height

    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?
    Gre

  3. #3
    2 Star Lounger
    Join Date
    Aug 2004
    Location
    Withyham, Sussex, England
    Posts
    121
    Thanks
    2
    Thanked 1 Time in 1 Post

    Re: Making an IMG 100% of the viewable height

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

  4. #4
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Making an IMG 100% of the viewable height

    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. <img src=/S/grin.gif border=0 alt=grin width=15 height=15>

  5. #5
    2 Star Lounger
    Join Date
    Aug 2004
    Location
    Withyham, Sussex, England
    Posts
    121
    Thanks
    2
    Thanked 1 Time in 1 Post

    Re: Making an IMG 100% of the viewable height

    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) .

  6. #6
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Making an IMG 100% of the viewable height

    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:
    <pre><html>
    <head>
    <title>Zoom Demo</title>
    <script>
    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);
    }
    }
    </script>
    </head>
    <body id="bod" style="zoom: 1.0">
    <h2>This is in h2 style</h2>


    This is an ordinary paragraph</p>



    Try it out: Increase zoom or
    Decrease zoom</p>
    </body>
    </html></pre>

    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).

  7. #7
    2 Star Lounger
    Join Date
    May 2002
    Location
    Londonderry, Ireland, Northern
    Posts
    159
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Re: Making an IMG 100% of the viewable height

    Hi - so it zooms IE, but FF doesn't respond. Is that what you expected?
    All help gratefully received!

  8. #8
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Making an IMG 100% of the viewable height

    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).

  9. #9
    cgschlangen
    Guest

    Re: Making an IMG 100% of the viewable height

    My guess is the fault lies with IE's programming translation... I've had this problem before...
    I'm thinking that by creating the DIV Container - IE puts a buffer around whatever is inside it and when you size the image to 100% it forces the buffer to flow around it...
    My solution lies below...

    <body topmargin=0 leftmargin=0>
    <table width=100% height=100% cellpadding=0 cellspacing=0 style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 1; visibility: visible; text-align: right">
    <tr>
    <td>
    [img]filename.jpg[/img]
    </td>
    </tr>
    </table>

    One interesting point to mention is that if you don't specify 100% width on the table tag - the table will only be as wide as the original image... it looks interesting when you force the image height to 100%

    I don't know if it'll work the same in FF - but since you already have a methode that works for Mozilla - you can always create a JS to check which browser people are using - then direct the script to decide which way things swing...
    Good Luck
    Dan

  10. #10
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts

    Re: Making an IMG 100% of the viewable height

    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 <html> tag --

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    -- 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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •