Reduce image and center

Question

I have an image that I bring from the database and put an IMG tag in the size of 960px by 480px. I need to resize it to 470x160. I need it to be resized by the length and the leftover height to be cropped, but taking it out from the center. See the image below:

I need to dispose of the two gray bands.

Can you do this in CSS3 or Jquery? If so, how?

Thank you

Answer 1

Hello,
take a look at this link to see if this was the desired result.
this is the code:

$("img").hover(function(){
    $(this).toggleClass("img-zoom");
});

div{
    position: relative;
    overflow:hidden;
    width:470px;
    height:160px;
}
img{
    position: relative;
    top: -50%;
    margin-top: 40px;
    width:100%;
    -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out;
}
.img-zoom { -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2);     transform: scale(1.2); 
}

<div>
    <img src="http://i.stack.imgur.com/sKByS.jpg" alt="img" />
</div>

Answer 2

One solution would be to use the statement transform in the image:

div{
    position: relative;
    overflow:hidden;
    width:470px;
    height:160px;
}
img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width:100%;
}

<div>
    <img src="http://i.stack.imgur.com/sKByS.jpg" alt="img" />
</div>

This way, you have a container for the image that defines the width and height you want to get.

The image is the width of that container, the declaration transform will center the image on that container and the image top/bottom is hidden because the container has the overflow hidden.