CSS를 사용하여 이미지를 자동으로 중앙에 배치하고 특정 정사각형 크기로 자르려면 어떻게 해야 합니까?

자동으로 이미지 중앙 정렬 및 자르기

종종 특정 정사각형 크기에 맞게 이미지를 자르고 중앙에 배치해야 하는 경우가 있습니다. 이미지 크기에 대한 사전 지식. 이는 CSS 배경 이미지 속성을 활용하여 달성할 수 있습니다.

동적 자르기로 이미지 가운데 맞추기

동적으로 이미지를 가운데에 맞추고 자르려면 다음 단계를 따르세요.

1. 원하는 자르기를 나타내는 특정 너비와 높이를 가진 HTML 요소를 정의합니다.
2. 이미지 URL을 설정하려면 background-image 속성을 사용하세요.
3. background-position: center center;를 사용하여 이미지를 중앙에 정렬하세요.
4. 이미지 방지 background-repeat: no-repeat;를 설정하여 반복하지 않도록 합니다.

예 코드:

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

<div class="center-cropped">

이 기술을 사용하면 이미지가 원래 크기에 관계없이 정의된 치수 내에서 자동으로 중앙에 맞춰지고 잘립니다.

위 내용은 CSS를 사용하여 이미지를 자동으로 중앙에 배치하고 특정 정사각형 크기로 자르려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!