CSS: Crop and resize image to certain ratio

Edit margin and move the image around within the <div> container.

<style>
.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    max-width: 400px;
    height: auto;
    margin: -75px 0 0 -100px;
}
</style>

<div class="crop">
    <img src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>

Demo 

Refer:
http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped
http://dabblet.com/gist/4711695