CSS를 사용하여 이미지를 자동으로 자르고 가운데에 맞추려면 어떻게 해야 합니까?

이미지 자르기 및 가운데 맞춤 자동화

이미지가 완벽하게 중앙에 맞춰지고 특정 영역 내에서 잘리는 것이 어려울 수 있습니다. 특히 이미지가 크기는 알 수 없습니다. 이 질문은 CSS를 사용하여 이미지를 자동으로 자르고 중앙에 배치하는 기술을 탐구합니다.

배경 이미지 및 센터링

해결책에는 크기가 일치하는 요소 내에서 배경 이미지를 활용하는 것이 포함됩니다. 원하는 자른 크기. 배경 위치를 중앙 중앙으로 설정하면 이미지가 요소 내 중앙에 배치됩니다.

기본 예

이 코드 조각에서 .center-cropped 클래스는 너비와 높이가 100픽셀인 요소를 정의합니다. background-image 속성은 이미지 URL을 할당하고 background-position 속성은 요소 내의 이미지를 중앙에 배치합니다.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped">

이 방법을 사용하면 사전 정의된 사각형 내에서 이미지를 자동으로 자르고 중앙에 배치할 수 있습니다. 다양한 이미지 크기에 걸쳐 일관된 시각적 표현을 보장합니다.

위 내용은 CSS를 사용하여 이미지를 자동으로 자르고 가운데에 맞추려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!