[FIXED] How to crop, resize and center an <img> with a fixed height using CSS

Issue

I'm trying to find a way to crop and resize image to fit in its container without distortion. I have set the height of the container, so the image will have to fill 100% this height, and the center of the image has to match the center of the container.

This is my html:

<div class="container"> 
     <img src="image.jpg" class="img-responsive">
</div>

And this is CSS:

.container {
overflow: hidden;
position: relative;
height: 280px;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

Solution

This technique works quite well:

.container {
overflow: hidden;
position: relative;
height: 260px;
width: 358px;
}
.img-responsive {
position: absolute;
width: auto;
height: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

Answered By - Antonino Lattene

Answer Checked By - Cary Denson (PHPFixing Admin)