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

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

다양한 크기의 이미지로 작업할 때 이미지를 자동으로 자르고 특정 이미지의 가운데에 맞춰야 합니다. 정사각형 차원이 발생합니다. 알려진 이미지 크기에 의존하는 이전 접근 방식과 달리 보다 강력한 솔루션이 필요합니다.

효과적인 접근 방식 중 하나는 배경 이미지를 활용하는 것입니다. 원하는 자르기 크기에 맞게 크기가 조정된 요소 내에서 이미지를 중앙에 배치하면 원하는 결과를 얻을 수 있습니다.

구현 예

이 기본 예는 접근 방식을 보여줍니다.

 너비: 100px;<br> 높이: 100px;<br> 배경 위치: 중앙 중앙;<br> 배경 반복: 반복 없음;<br>}

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">>

로그인 후 복사

< /div>

이 예에서는 ".center-cropped" 클래스는 100픽셀의 정사각형 치수를 가진 요소를 정의합니다. 배경 이미지 URL은 더 큰 크기의 자리 표시자 이미지를 가리킵니다. 스타일을 지정하면 이미지가 요소 내 중앙에 위치하여 잘리고 중앙에 위치한 정사각형 이미지가 생성됩니다.

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