HTML과 CSS를 사용하여 이미지의 일부만 표시하려면 어떻게 해야 합니까?

HTML/CSS에서 이미지 일부 표시

이미지를 표시할 때 이미지의 특정 부분만 표시하고 싶을 때가 있습니다. 그것. HTML과 CSS는 이를 달성하기 위한 여러 기술을 제공합니다.

CSS 'Clip' 속성 사용

한 가지 접근 방식은 CSS의 'clip' 속성을 사용하는 것입니다. 그러나 이 속성을 사용하려면 요소가 절대적으로 배치되어야 하므로 특정 시나리오에서는 제한이 있을 수 있습니다.

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

'css:url()' 참조 사용

'css:url()' 참조로 작업하는 경우 CSS에서 이미지 클리핑이 직접 가능하지 않습니다. 이런 경우에는 이미지를 더 작은 부분으로 잘라서 원하는 부분만 표시하는 '이미지 슬라이싱' 기술을 고려해 볼 수 있습니다.

<div class="container">
  <img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="HTML과 CSS를 사용하여 이미지의 일부만 표시하려면 어떻게 해야 합니까?" ><p>이 기술을 사용하면 중앙 50x50px만 표시할 수 있습니다. 앞서 언급한 250x250px 이미지의 일부입니다.</p>
<p><strong>대안 접근 방법</strong></p>
<p>절대 위치 지정이나 '이미지 슬라이싱' 기술을 사용할 수 없는 경우 다음과 같은 다른 방법을 모색할 수 있습니다.</p>
<ul>
<li>
<strong>이미지 자르기:</strong> 이미지 편집 소프트웨어를 사용하여 외부에서 이미지를 자르고 자른 부분만 사용하세요. 부분.</li>
<li>
<strong>JavaScript 사용:</strong> JavaScript를 사용하여 이미지 표시 크기를 동적으로 조정하고 즉시 자릅니다.</li>
<li>
<strong>이미지 뷰어 사용:</strong> 최신 브라우저의 '이미지 뷰어' 도구와 같이 자르기 기능을 제공하는 이미지 뷰어를 사용하세요.</li>
</ul>
</div>

위 내용은 HTML과 CSS를 사용하여 이미지의 일부만 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!