<img>を固定高さに裁断、サイズ変更、センターする方法

Question

画像を切り抜いてサイズを変更し、歪みのないコンテナに収まるようにしようとしています。私はコンテナの高さを設定しているので、画像はこの高さの100％を塗りつぶす必要があり、画像の中心はコンテナの中心に一致する必要があります。

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

そして、これはCSSです：：

これは私のhtmlです

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

Answer 1

この手法は非常にうまく機能：

.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%); 
}