Treehouse: Grow your CSS skills. Land your dream job.

Responsive images

  • # May 28, 2013 at 8:15 am

    I have used below mentioned css for fluid images but it works in some images and some images are not at all fluid and remain static.

    what to do? no idea, pls help

    border:0; max-width: 100%; height: auto; width: auto9; /* ie8 */

    # May 28, 2013 at 8:21 am

    are the small images which dont scale too small? e.g. the are may be 1000px but the image width might only be 900px wide?

    See if width 100% fixes it or make the original image larger?

    # May 28, 2013 at 8:29 am

    Images which are working fine are :

  • and not working images are


    nothing defined in “img1″ class

# May 28, 2013 at 10:33 am

If you set the dimensions in “inline CSS” it will override anything you may have set in your CSS sheet (probably).

Try removing the dimensions from your HTML and see what happens.

# May 28, 2013 at 1:52 pm

img{ border:0; max-width: 100%; height: auto; width: auto9; /* ie8 */ }

What is with the “9” after the “width: auto”

# May 28, 2013 at 3:03 pm

It’s an IE hack

# May 28, 2013 at 4:41 pm

actually that isn’t necessarily inline css , its considered more of a html img attribute hence why I think his img css overrides those.
I’ve run into this program before in which IE8 or less just loads the actual img size so if our img 1 was like 600×400 it would load the whole thing and doesn’t resize.

Do you know what browsers are giving you the problem I know you can add -ms-interpolation-mode:bicubic; to make it resize more smoothly.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.