how to leave rectangular image?

I think there are many ways to do this, for example, background-size with background-position , as already mentioned.

However % is not supported by some older browsers (if you need to control the size), if you need to run on some older mobiles I recommend using background-size , see an example:

.post .photo {
    overflow: hidden;
    width: 400px;

    /*Aqui deve ficar a altura da imagem desejada*/
    height: 150px;
}
.post .photo img {
    /*Aqui você deve ajustar pra centralizar a imagem verticalmente*/
    margin-top: -75px;
}

<div class="post">
    <div class="photo">
        <img src="http://i.stack.imgur.com/kCKkG.png"></div></div>

Seetheoriginalimage:

Well Alexsander, this can be done in a very simple way, by means of the background of css property. For example:

<div class="noticia"></div>
<style>
.noticia{
  width: 300px;
  height: 200px;
  background: url('http://goo.gl/n7nehC') no-repeat;

}
</style>

Results in: link

Using your image as the background of div . Through background-position and background-size , you can change the position and size of the image.

There is more information in this document:

link

link