Grow your CSS skills. Land your dream job.

Expanding Image

  • # May 18, 2013 at 7:04 pm

    Hi,

    If you go to PayPal’s UK homepage there’s an image of a couple looking out onto a lake. This image is sized at 1600px so it fills the screen regardless of the screen resolution. How simply do I achieve this without having a left/right scroll bar at the bottom if the screen resolution is less than 1600px wide? As the screen resolution gets bigger more of the image at the sides will be seen, and as it gets smaller they will be cut off.

    Thanks

    # May 18, 2013 at 7:09 pm

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

    Demo: http://jsfiddle.net/kuQhK/embedded/result

    * resize the browser

    # May 18, 2013 at 7:42 pm

    Thanks that works well. Sorry my CSS is rusty/developing. I tried adding “.home” after img so I can apply only to certian images using class=”home” but it didn’t work. What’s the correct syntax?

    # May 18, 2013 at 7:45 pm

    @ma701ss

    HTML

    CSS

    img.home {
    max-width: 100%;
    height: auto !important;
    }

    or

    .home {
    max-width: 100%;
    height: auto !important;
    }

    Although, I would do this for every image

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

You must be logged in to reply to this topic.

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