html - CSS Display an Image Resized and Cropped -

I want to show an image of a URL with a certain width and height even if it has a different size ratio So I want to change the shape (retaining the ratio) and then want to cut the size of the image I want.

I can resize with the html img property and I can cut it from background-image .
How can I do both?

Example:

This image:

Size is <800x600 pixels> and I want to show an image of 200x100 pixels

< I 200x150px :

   img  p> IMG style = "width: 200px; height: 150px;" Src = "http://img1.jurko.net/wall/paper/donald_duck_4.jpg" & gt;  

This gives me:

  & lt; Img style = "width: 200px; height: 150px;" Src = "http://img1.jurko.net/wall/paper/donald_duck_4.jpg" & gt; I can cut the image  200x100  pixels with  

and background-image .

  & lt; Div style = "background-image: url ('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width: 200px; height: 100px; background-position: center;" & gt; & Amp; Nbsp; & Lt; / Div & gt;  

Gives me:

  & lt; Div style = "background-image: url ('http://img1.jurko.net/ wall / paper / donald_doc_4.jpg'); width: 200px; height: 100px; background-condition: center;" & gt; & Amp; Nbsp; & Lt; / Div & gt;  

How can I do both?
Change the size of the image and then cut the size I want it to?

You can use a combination of both methods such as

  & lt; Div class = "crop" & gt; & Lt; Img src = "..." alt = "..." /> & Lt; / Div & gt;  

CSS:

 . Crop {width: 200px; Height: 150px; Hidden flurry; }. Crop img {width: 400px; Height: 300px; Margin: -75px 0-100px; }  

You can & lt; Div / & gt; You can use negative margins to move the image inside .