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

StackOverflow https://stackoverflow.com/questions/57725

  •  09-06-2019
  •  | 
  •  

문제

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

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

도움이 되었습니까?

해결책

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

다른 팁

이미 답변을 수락하셨지만 (다소 잘 알려지지 않은) 내용을 추가하겠습니다. clip CSS 속성이지만 하다 클리핑되는 요소가 다음과 같아야 합니다. position: absolute; (부끄러운 일입니다):

.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 바이올린 데모, 실험용.

원래 답변을 보완하기 위해 다소 뒤늦게 – 사용 방법을 보여주기 위해 편집 중입니다. clip-path, 현재는 더 이상 사용되지 않는 clip 재산.

그만큼 clip-path 속성은 다양한 옵션을 허용합니다(원본보다 더 많은 옵션을 제공합니다). clip), 의:

  • inset — '거리'로 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개)는 선이거나 (1개)는 점입니다. polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
  • url — 이는 SVG를 식별하기 위한 로컬 URL(CSS ID 선택기 사용) 또는 외부 파일의 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 바이올린 데모, 실험용.

참고자료:

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

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

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

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

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

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

IE>9에서만 작동하는 것으로 보이며 아마도 다른 모든 브라우저의 모든 주요 버전에서도 작동할 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top