>웹 프론트엔드 >CSS 튜토리얼 >지정된 정사각형 내에서 임의의 이미지를 자동으로 자르고 중앙에 배치하는 방법은 무엇입니까?

지정된 정사각형 내에서 임의의 이미지를 자동으로 자르고 중앙에 배치하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-04 21:33:14362검색

How to Auto-Crop and Center an Arbitrary Image within a Specified Square?

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

알 수 없는 크기의 이미지가 있는 경우 중앙에서 정사각형을 잘라내어 지정된 정사각형 내에 표시하는 작업에는 다음이 필요합니다. 동적 솔루션.

배경 사용 이미지

한 가지 접근 방식은 원하는 잘린 치수에 맞게 크기가 조정된 요소 내 중앙에 위치한 배경 이미지를 사용하는 것입니다.

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

<div>

이 방법은 배경의 크기를 자동으로 조정하고 위치를 지정하는 CSS의 기능을 활용합니다. 원본 이미지 크기에 상관없이 이미지가 지정된 크기 내에서 중앙에 잘리고 잘립니다.

위 내용은 지정된 정사각형 내에서 임의의 이미지를 자동으로 자르고 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.