Should I put image width and height as html in img tags or css?

HTML & CSS
1

Just continuing my css learning curve trying to cull excess code. I was thinking I can put image width and height in my css file instead of in the html. Is that a good idea or am I getting carried away in my quest to get rid of html code?! Thanks

2

The image itself knows how big it is so you never need to specify the size in the CSS.

You only need to specify it in the HTML if you want to make sure that the correct space is reserved for it at the text is rendered rather than having the page reorganise itself once the image finishes loading.

3

CSS is for general settings. Each image has its own width and height so doing it with CSS does not make sense.

I hate websites that jump around while loading and this happens because the image sizes are not included in the HTML. Very amateurish IMO.

4

There are times when you might want to set a % width, in which case there is a purpose.

5

Thanks Stephen, Denny and Ralph I’ll leave them in then as I don’t want my page reorganizing itself :slight_smile:

6

A handy trick ( tho realize it doesnt support OLDER IE) is to set MAX_WIDTH. As has been stated, images know their own width automatically, but CSS does can override that. By setting max-width to some dimension less than the width of it intended container you can make sure the image doesn’t spill out horizontally.

Roughly something like:

.container {width: 500px;}
.container img{max-width: 500px;}

I am using pxs here to keep this brief but, with a little applied math and understanding of how units carry, you can also use ems and %s.