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.
View the results at: img_problem.html
<!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>
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).
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.
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,
Though if it is a plain backgound, I don't see why you would.
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 08:21 AM.
Taken from one of my stylesheets, and it works as you described above:-
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)