HTML / CSS에서 이미지의 일부만 표시하려면 어떻게해야합니까?

HTML에서 250x250px 인 이미지의 중앙 50x50px 만 표시하는 방법을 원한다고 가정 해 봅시다. 어떻게해야합니까 또한 css : url () 참조에 대해 이것을 수행하는 방법이 있습니까?

CSS 의 클립 을 알고 있지만 절대 위치 지정과 함께 사용할 때만 작동하는 것 같습니다.

이를 수행하는 한 가지 방법은 컨테이너에 배경으로 표시하려는 이미지 (td, div, span 등)를 설정 한 다음 배경 위치를 조정하여 원하는 스프라이트를 얻는 것입니다.

질문에 언급 된 바와 같이, 존재 clip는 비록 CSS 속성은 않는 요소가 클리핑되는 것이 요구된다 position: absolute;(A 수치이다)

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

실험을위한 JS Fiddle 데모 .

다소 답답하게 원래의 답변을 보완하기 위해,의 사용을 보여주기 위해 편집 중 입니다. clip-path이제 더 이상 사용되지 않는 clip속성을 대체 했습니다.

이 clip-path속성은 다음 중 다양한 옵션을 허용합니다 (원본보다 clip).

• inset— 직사각형 / 입방체 모양으로, 'distance-from'으로 4 개의 값으로 정의됩니다 (top right bottom left).
• circle— circle(diameter at x-coordinate y-coordinate).
• ellipse— ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• polygon— 왼쪽 상단 모서리의 요소 원점과 관련하여 일련의 x/ y좌표로 정의됩니다 . 경로가 자동으로 닫히기 때문에 다각형의 실제 최소 포인트 수는 3 개 여야합니다 (2 개) polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url — 이것은 CSS ID 선택기를 사용하는 로컬 URL이거나 SVG를 식별하기 위해 외부 파일의 URL (파일 경로를 사용하는) 일 수 있습니다. 그들의 이익이나 경고에 대한 통찰력을 제공 할 수 없습니다.

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

실험을위한 JS Fiddle 데모 .

참고 문헌 :

• clip— 참고 : 더 이상 사용되지 않습니다 .
• clip-path(MDN) .
• clip-path(W3C) .

이 경우와 같이 이미지가 컨테이너의 유일한 요소라고 가정 할 때 가장 깨끗하지는 않지만 다른 대안은 다음과 같습니다.

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

그런 다음 컨테이너를 원하는 크기의 마스크로 사용하고 이미지를 음의 여백으로 둘러 싸서 올바른 위치로 이동할 수 있습니다.

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

이 JSFiddle 에서 데모를 볼 수 있습니다 .

IE> 9 및 다른 모든 브라우저의 모든 중요한 버전에서만 작동하는 것 같습니다.