SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Jan 2012
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Size vs Flexible Design and HTML5

    I've been so busy researching and writing content I haven't had time to keep up with the latest technology. I just discovered "Responsive Web Design" and "Flexible Images," and I still need to convert my database queries to PDO and maybe convert my web pages to HTML5. It sounds a little overwhelming.

    The good news is I just discovered the CSS image style max-width: 100%. It's so simple and useful it blew me away. But there's one problem.

    My code specifies the image's size: <img src="whatever" width="500" height="400" alt="Something">

    If I apply the style (max-width: 100%) and put the image in a div measuring 100pixels wide, the image correctly scales down to a width of 100 pixels, but the height remains stuck at 400pixels. How do I fix that?

    Conversely, I should ask if it's necessary to specify the width and height in the code in the first place, since it works fine without it. As I recall, the only problem I've ever had removing it is that my pages won't validate.

    And since I'm thinking of converting to HTML5, does it require me to specify an image's width and height?

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chavista View Post
    the height remains stuck at 400pixels. How do I fix that?
    Try height: auto; in the CSS.

    if it's necessary to specify the width and height in the code in the first place
    No, it isn't necessary. Its only real use is for when the page is loading. If it's there, the page will load with a space for the image even before it has loaded. Otherwise, you sometimes see a page jumping all over the place as the images gradually load, which can be quite annoying. But still, in the responsive design era, I'm inclined not to include the width and height in the HTML.

  3. #3
    SitePoint Addict
    Join Date
    Jan 2012
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! This (flexible image combined with your auto tip) is one of the best web design "tricks" I've ever learned!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Chavista View Post
    This (flexible image combined with your auto tip) is one of the best web design "tricks" I've ever learned!
    Yeah, it's pretty cool. % sizing of images used to look lousy in IE (or perhaps Windows) but I gather it's OK in the latest versions.

  5. #5
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Indeed, the latest IE's are doing it better. - It's not Windows: the same browser scaled images are better in Firefox than IE7.
    • Note: Paint programs are better equipped for scaling than browsers > a max-width (and/or min-width) for auto-adapting images can be helpful.

    But unless a visitor is calling the image-address directly (in the original size), a visitor cannot compare the scaled browser result with the original quality.

    A testpage with 2 different pics: image-rendering-in-pct.htm


Tags for this Thread

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
  •