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

Images stretched in Safari and Chrome

  • # May 12, 2011 at 3:56 pm

    Hi Guys,
    I am trying to use Chris’ Scrolling Sidebar – and I cannot figure out why the images in it are being stretched in Chrome and Safari. I have specified their width and height but they are still getting stretched out. I can’t figure it out.

    The site is a mess and very much under construction at

    Any clues to what is causing this would be greatly appreciated.

    # May 12, 2011 at 4:06 pm


    This is what’s causing it:

    .widget-container img {
    margin-left: 10px;
    height: 100%;

    main.css line 133. The height 100% is stretching them. Take that off and you’ll be good to go.


    # May 12, 2011 at 4:43 pm

    Nope, didn’t work, I put that in there so it would respect the declared height of the image. Without it the image still stretches….????

    # May 12, 2011 at 4:46 pm


    # May 12, 2011 at 4:48 pm

    Hey, that’s because on line 4 you also have this:

    html, body, span, h1, h2, h3, p, a, img, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: 100%/1.231 arial,helvetica,clean,sans-serif;
    vertical-align: baseline;
    color: black;
    height: 100%;

    That height: 100% at the end is causing it.

    To test just inspect the element in chrome or firefox and click on the img in the html, then uncheck the height: 100% in the right panel and you’ll see that it fixes it.


    # May 12, 2011 at 5:46 pm

    Hey John, good catch, it’s part of my standard CSS reset, so I didn’t even think of looking there and I’ve never had a problem with it before. You learn every day…. Thanks

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

You must be logged in to reply to this topic.