The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Expanding Image

  • # May 18, 2013 at 7:04 pm


    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.


    # May 18, 2013 at 7:09 pm

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


    * 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




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


    .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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed