div 안에 이미지 가운데 자르기

Question

일부는 닫았지만 답변을 찾을 수 없습니다.

이 그래서 중간에 같은 화면 비율로 완벽입니다 :

는 내가 조금 같이 (그것을 자르기)의 중간을 가지고 싶은 이미지를 가지고있다.

그것이 가장자리에 연결 ..where :

내가 관리해야 모두, 영상과 같이 작물이다.

기본적으로 이미지를 내부에두고 고정 된 크기의 div가 있어야합니다. 이 이미지는 확대되어 오버플로가 숨겨 지도록 중앙에 있어야합니다.

어떻게하면됩니까?

Answer 1

HTML :

<div> 
    <img src="http://www.nature.org/cs/groups/webcontent/@web/@northamerica/documents/media/pygmy-rabbit-600x500.jpg" /> 
</div> 

CSS :

div{ 
    position: relative; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 

img{ 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    right: -9999px; 
    bottom: -9999px; 
    margin: auto; 
} 

CODEPEN 링크 : http://codepen.io/bra1N/pen/NArjNN