Make image fill div completely without stretching

Question

I have large images of varying dimensions that need to completely fill 240px by 300px containers in both dimensions. Here is what I got right now, which only works for one d

Answer 1

Taking out the line: max-width:100% in your CSS file seems to do the trick.

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

Also you can add > to your closing div in your HTML file could make the code neater.

Here is a working JSFiddle link: http://jsfiddle.net/HsE6H/19/