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

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

이미지의 특정 부분을 표시하는 기능은 웹에서 일반적인 요구 사항입니다. 개발. 썸네일을 만들거나 특정 섹션을 강조할 때 사용할 수 있는 여러 기술이 있습니다.

HTML 솔루션

요소는 특정 기준에 따라 다양한 이미지 부분을 표시하는 강력한 솔루션을 제공합니다. 여러 개의 내의 요소 컨테이너를 사용하면 다양한 뷰포트 크기, 기기 픽셀 비율 또는 기타 조건에 대해 다양한 이미지 URL이나 스타일을 지정할 수 있습니다. 이 접근 방식은 표시된 이미지 부분을 제어하는 ​​데 더 큰 유연성을 제공합니다.

<picture>
  <source media="(min-width: 1000px)" srcset="image-full.jpg">
  <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w">
  <img src="image-small.jpg" alt="default image">
</picture>

clip()을 사용하는 CSS 솔루션

질문에서 언급한 대로 clips() 속성 를 사용하면 요소 내에 표시할 직사각형 영역을 정의할 수 있습니다. 그러나 요소가 절대 위치에 있어야 합니다.

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

css:url() 참조

안타깝게도 clips() 속성은 다음과 함께 직접 사용할 수 없습니다. CSS:url() 참조. 그러나 원하는 잘린 부분이 있는 새 이미지 요소를 만든 다음 해당 이미지를 원본 요소의 배경 이미지로 사용할 수 있습니다.

#element {
  background-image: url(clip.png);
  background-position: 50% 0%;
}

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