SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Evangelist captainccs's Avatar
    Join Date
    Mar 2004
    Location
    Caracas, Venezuela
    Posts
    516
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.
    Denny Schlesinger
    web services

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by captainccs View Post
    Each image has its own width and height so doing it with CSS does not make sense.
    There are times when you might want to set a % width, in which case there is a purpose.

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2008
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stephen, Denny and Ralph I'll leave them in then as I don't want my page reorganizing itself

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

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