Results 1 to 7 of 7
  1. #1
    5 Star Lounger
    Join Date
    Oct 2001
    Location
    San Bernardino, California, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Auto resizing images to fit

    I have a webpage I am working on that has three frames, one for content, one for images, and one for navigation (menu). Menu selection drives what goes into the target frames.

    I know how to resize images using HTML to a specific size but how do you code it such that the image willl automatically scale to fit the frame and, hence, look right on any screen size or resolution?

    Thanks.

  2. #2
    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: Auto resizing images to fit

    Is the image loaded directly into the frame, or into a document in the frame? With a document, you could set the image dimensions in the <img> tag and/or using CSS. If you load the image directly as the src of the <iframe>, you don't have that option.

  3. #3
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Auto resizing images to fit

    Hi Don

    It can be done with raw CSS, the following bit can resize the image to fit the frame but it does distort:

    img {
    border: none;
    height: 100%;
    width: 100%;
    }


    A good option is Lightbox and very easy to set up. I use it for our Running Club Gallery
    Jerry

  4. #4
    5 Star Lounger
    Join Date
    Oct 2001
    Location
    San Bernardino, California, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Auto resizing images to fit

    Thanks all for the help. I don't know yet how to effectively use CSS - still looking for a "tutorial for dummies". However, i did have some success by loading it directly into the frame with the following:

    <frame name="top" IMG src="IMG_8188.GIF" WIDTH="100%">

    Now if I could figure out out to center it and effectively crop the picture. I used Irfanview to crop it but it seems to leave a border.

  5. #5
    4 Star Lounger
    Join Date
    Mar 2004
    Location
    Griffith, New South Wales, Australia
    Posts
    507
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Auto resizing images to fit

    Don,

    W3Schools as mentioned many times before is a great free source of information.

  6. #6
    Platinum Lounger
    Join Date
    Feb 2002
    Location
    A Magic Forest in Deepest, Darkest Kent
    Posts
    5,681
    Thanks
    0
    Thanked 1 Time in 1 Post

    Re: Auto resizing images to fit

    Don

    Can I just clarify

    <hr>I used Irfanview to crop it but it seems to leave a border.<hr>

    Do you mean the graphic has a border like my sample below? If so, this is caused by the default "border" or margin created by the browser which can be removed using, sorry, Cascading Style Sheets <img src=/S/flee.gif border=0 alt=flee width=25 height=25> <img src=/S/grin.gif border=0 alt=grin width=15 height=15> I am happy to assist and help you through the issue, but only if you want as the solution is reasonably simple.
    Jerry

  7. #7
    5 Star Lounger
    Join Date
    Oct 2001
    Location
    San Bernardino, California, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Auto resizing images to fit

    No, that's not it. What I meant is that the cropped image from Irfanview has a border. A border that is visible even when I reopen the image in Irfanview. I am using Irfanview 4.1 and previous versions did not do this. I noticed on the Irfanview forum that many others have similar problems. BTW, I checked the forum after I posted here. Had I known it was a document problem, I would not have mentioned it here. I am trying to get back to a previous version.

Posting Permissions

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