<img>을 CSS를 사용하여 고정 된 높이로 자르고 크기를 조정하고 가운데에 배치하는 방법

Question

이미지 왜곡없이 이미지를 자르고 크기를 조정할 수있는 방법을 찾으려고합니다. 컨테이너의 높이를 설정 했으므로 이미지가이 높이의 100 %를 채워야하고 이미지의 중심은 컨테이너의 중심과 일치해야합니다.

이 내 HTML입니다 :

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

그리고 이것은 CSS입니다 :

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