Results 1 to 5 of 5

Thread: img size problems in xhtml

  1. #1
    Join Date
    May 2005

    img size problems in xhtml

    I can't find anything in the spec that says this shouldn't work. I want to have an image that will resize based on a percentage of the viewport size but if I include both the width and height as percentages, only the width is used.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Image resize problem</title>
    <div><img style="width:100%;height:20%;" src="redbar.gif" alt="" />
    I expect this to make a bar across the full width of the page taking up 
    only the top 20 percent of the display area.</div>
    View the results at: img_problem.html

    Am I doing something wrong here? The spec says that if you specify both width and height it's supposed to use them. Width and/or height are only supposed to be automatic if you leave them out (and then they're supposed to maintain proportionality).

  2. #2
    Join Date
    Nov 2002
    Nashua, NH
    When the image resizes the aspect ratio is kept. Therefore when you use both width and height one of them is ignored. In your particular example, I'm not sure why you need image in the first place - using background color of the element will do

    Working web site is not the one that looks the same in a few graphical browsers, but the one that adequately delivers its content to any device accessing it.

  3. #3
    Join Date
    May 2005
    You could set up a class for the image , portrait or landsacpe for example -
    <img class="landscape" src="images/table_13.jpg" alt="Table sample, shoal of fish with coral" height="115" width="225" />

    and in your css,

    img.landscape {
    width: 100%;
    height: 20%;

    Though if it is a plain backgound, I don't see why you would.

  4. #4
    Join Date
    May 2005
    That particular image is simply an example. It's not supposed to be a background.

    Let's say for example you're building a website about bridges. You want to span the top of your page with a picture of a bridge where the bridge supports fall at 20% and 80% blending perfectly into your 3 column layout. You then position:absolute your title text on that bridge and it looks pretty good on your 1024x768 screen. You want that image to take the top 20% of the screen, no matter what size screen. By specifying height:20% for the image and width:100% I would expect you would have an image that would span the screen and only take up the top 20% of the screen. I could then visit your page from a 1958x768 widescreen notebook or a cell phone and still have the graphical fluff look right. You don't care about the aspect ratio of the image, because you've designed it so it looks good no matter how badly you stretch or compress it.

    You can't use a background image because it doesn't get resized at all.

    The point is, the spec says that it does not keep the aspect ratio if both width and height are specified (with no exeption for percents).
    Last edited by jjulian; 05-20-2005 at 09:21 AM.

  5. #5
    Join Date
    May 2005
    Taken from one of my stylesheets, and it works as you described above:-

    img.pt {

    width: 7em;

    height: 9.5em;}

    img.lsp {

    width: 8em;

    height: 6em;

    padding-right: 1em;}

    See it working at http://www.colinwatmough.com/about2.html
    and this explains it, http://www.bigbaer.com/css_tutorials...l.tutorial.htm

    You will have to experiment, of course.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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