CSS Image Cropping

[prolemur]

I want to make a full width banner for a website.

Currently my code is:

 

HTML / CSS

<img src = "images/banner.png">img {width: 100%;}

This makes the images stretch when the window is resized. What I would prefer to happen is if the window is resized than the edges of the image are cropped off.

 

If the width of the webpage was the same as the width of this image, I would want it to look like for example. Right now it would stretch to maintain the original aspect ratio of the image and this makes it's height change to a sliver if the webpage was actually this wide.

[Tycho]

use these css properties for the div that contains the image

EDIT i'm sorry, you should add a class to the image and assign these properties to the class

max-width:100%;max-height:100%;

[prolemur]

 

use these css properties for the div that contains the image

EDIT i'm sorry, you should add a class to the image and assign these properties to the class

max-width:100%;max-height:100%;

This does the same thing as before.

[Tycho]

This does the same thing as before.

hmm strange, I found this on stackoverflow and if this doesn't work then I'm afraid I don't know it either

CSS:#im {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-image: url("path/to/img");    background-repeat: no-repeat;    background-size: contain;}HTML:<div id="wrapper">    <div id="im">    </div></div>

[madknight3]

Not sure if this will work, or if it's the best way to achieve what you want, but what if you gave it a fixed size and set overflow to hidden?