height, width of img, where to define

[wiser3]

I'm designing a CSS driven web site and i'm wondering where to put the height and width values of images.

1. Put them in the html as usual

2. Use CSS to give each image it's sizes. ie. #logo img { height: 150px; width: 150px }

3. If a div only has one image in it. Should i set the size on the div and not define it for the specific img or in the html. ie. #logo { height: 150px; width: 150px }

4. Should you define the size in the html, the div and for the image?

What's the best practice?

 

[oppcos]

Personally, I'd put the width and height in the HTML so non-css compliant browsers can pre-set the sizes correctly. Styles that more presentational than functional I'd put in the style sheet.

On the other hand, I wouldn't surround an image with a div unless you were using the div's background-image attribute (or you have some other compelling reasons to surround a single element with div tags). If that's the case, then you set width and height in the div.

 

[traingamer]

I would use option 1 in most cases.

That being said, there are times when you may want to use one of the other methods, e.g. you have many images with the same dimensions.

It really depends on what you're trying to accomplish. How's that for a wishy-wshy answer?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[traingamer]

Or wishy-washy as the case may be.

 

[wiser3]

The img is in it's own div, so that i can abosutly position it with css.

 

[oppcos]

You can also do something like this:

<img class="test" src="Some.jpg" height="100" width="100" alt="Explanation of Some.jpg" />

Then you should be able to position the image with:

img.test { position:absolute; top:200; left:200; }

For instance.