Grow your CSS skills. Land your dream job.

Responsive Image width:inherit

  • # December 8, 2012 at 8:56 am

    Was having trouble matching a image width, found that

    #footer img {
    width: inherit
    }

    worked well for me. However, it seemed to make the page load slower.

    # December 8, 2012 at 9:58 am

    Hadn’t thought of that. I [opened up a JSFiddle][1] to play around with it.

    Your implementation only works if your image’s container has a fixed width or if it has a percentage based width of 100%.

    If say the container has a 40% width then the image will only take of 40% of its container.

    I’m not saying don’t use inherit – just to be aware of that behavior.

    [1]:http://jsfiddle.net/m65Mz/2/

    # December 8, 2012 at 5:00 pm

    When you say trouble matching an image width what do you mean?

    For responsive images I usually just do;

    img {width: 100%; max-width: xxx; height: auto;}

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".