Expanding Image

[ma701ss]

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

[chrisburton]

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

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

* resize the browser

[ma701ss]

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?

[chrisburton]

@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

[Author]

Posts