I’m a newbie to this forum and have been dabbling in CSS for a while, but mostly at a fairly rudimentary level. I’m toying with the idea of providing visitors to our website (www.resteddoginn.ca) with a choice of resolution to accomodate their desktop size. The bulk of the site has a fair number of images on each page, the positioning of the images is controlled partially by DIV tags and align element, but the width of the main DIV is fixed in order to have better control over the layout and flow.
In order to maintain fairly similar lay-out flow on a smaller desktop I need to be able to control the absolute size of the images to something smaller than the width and height elements within the img tag when I narrow the width of the main DIV.
The way I figure on doing on this is to have very small php pages for the site in the 3 main resolutions I’m concerned with, with each resolution calling a different stylesheet where the max-height and max-width for the image is specified as a percentage of the height and width elements by setting a different value for the same IMG id. The actual page content would be a txt file called by a php command in the body of the small page.
My question after all this pre-amble is can I use max-height and max-width to control image display size regardless of what the ehight and width elements specify in the IMG tag?
You can, but only good browsers will respect it. Internet Explorer doesn’t understand max (or min) height and width.
But you can set height and width as percentages: for example,
img { width: 50% ; height: auto ; }
will display your image at 50% of the height of its parent element with the height automatically scaled to match. If the height of the containing element is explicitly specified (not automatically determined by the volume of its contents), you can use
Did a little experimenting and IE just doesn’t handle it well, no wonder I switched to Firefox:) I use Homesite as my HTML editor and it uses IE for preview. When I use the width as a percentage and the height auto, it previews the way I expect it, but when I upload the files and look at the page off the web IE shrinks the width only and ignores the auto for the height for all horizontally oriented images, resulting in a distorted picture, not what I want. Height and width elements are specified for all images and because some images I DON’T want shrunk since I use them for navigating, I use id’s for those I do want to shrink.
If I use height as a percentage and width to auto, the horizontal images disappear all together. I suspect that is because the DIV that contains the IMG has width set to auto and none of the DIV’s have their height specified.
when I upload the files and look at the page off the web IE shrinks the width only and ignores the auto for the height for all horizontally oriented images
A pox on all their houses!
It would be wierd if it only did this on the internet, but I’ve even managed to get it to do it without uploading the files: when the page is first loaded IE fails to respect the height:auto. When the image is resized, or the page is reloaded after it’s been resized (as when I was testing it), it works all right.