CSS 클립을 사용한 후에 다른 섹션을 표시하도록 이미지를 이동할 수 있습니까?

Question

CSS 클립 속성을 사용하여 이미지를 클립했습니다. 왼쪽 상단 모서리에서 이미지를 표시합니다. 이미지의 중심을 표시하도록 이미지를 이동할 수 있습니까? 나는 다음의 스타일 속성을 시도해 보았지만 이미지를 옮기지 만, 왼쪽 위와 왼쪽 여백은 실패했다. 인터넷을 통해 모든 것을 검색했지만 찾을 수있는 것은 클립 속성을 사용하는 방법에 대한 지침입니다.

CSS

.clip { 
    position: relative; 
    height: 130px; 
    width: 200px; 
    border: solid 1px #ccc; 
} 
.clip img { 
    position: absolute; 
    clip: rect(10px 190px 120px 10px); 
} 

HTML 여기

<ul id="galleries"> 
    <li class="clip"> 
    <a href="images/image_01.jpg" rel="lightbox"> 
     <img src="images/image_01.jpg"/> 
    </a> 
    </li> 
    <li class="clip"> 
    <a href="images/image_02.jpg" rel="lightbox"> 
     <img src="images/image_02.jpg"/> 
    </a> 
    </li> 
    <li class="clip"> 
    <a href="images/image_03.jpg" rel="lightbox"> 
     <img src="images/image_03.jpg"/> 
    </a> 
    </li> 
</ul> 

Answer 1

질문에 대한 대답은 : 여기 내 코드입니다. 오버플로는 표시하고 싶지 않은 모든 공간을 효과적으로 숨 깁니다. img에 상대적인 위치를두면 img가 가운데에 표시되거나 원하는 위치에 표시됩니다. 나는 아래로 대답을 넣어 전에

Here is a jsFiddle

CSS

.clip { 
    position: relative; 
    overflow: hidden; /*** Overflow to hide anything out of the size of the box ***/ 
    height: 130px; 
    width: 200px; 
    border: solid 1px #ccc; 
} 
.clip img { 
    position: relative; /*** position relative to place the img in center ***/ 
    top: -50%; 
    left: -15%; 
}