CSS 객체 피트 및 객체 위치를 사용하여 이미지가 표시되는 방식을 제어하려면 어떻게합니까?-CSS 튜토리얼-php.cn

CSS 객체 피트 및 객체 위치를 사용하여 이미지가 표시되는 방식을 제어하려면 어떻게합니까?

Emily Anne Brown

풀어 주다： 2025-03-18 14:34:23

원래의

120명이 탐색했습니다.

CSS는 object-fit 및 object-position 특성을 제공하여 이미지 또는 다른 대체 요소 (예 : 비디오)가 포함 된 상자 안에 표시되는 방법을 제어합니다. 이러한 특성은 이미지의 치수가 컨테이너의 치수와 일치하지 않을 때 특히 유용합니다.

객체-피트 :이 속성은 교체 된 요소의 내용이 컨테이너에 맞게 크기를 조정하는 방법을 지정합니다. 컨텐츠의 종횡비 및 스케일링을 제어합니다.
객체 위치 :이 속성은 object-fit 특성에 따라 크기가 조정 된 후 컨테이너 내에서 교체 된 요소의 컨텐츠의 정렬을 결정합니다.

이러한 속성을 사용하려면 이미지 요소를 타겟팅하는 CSS 규칙에 적용합니다. 예는 다음과 같습니다.

 <code class="css">img { width: 300px; height: 200px; object-fit: cover; object-position: center; }</code>

로그인 후 복사

이 예에서는 이미지가 종횡비 ( object-fit: cover )를 유지하면서 300x200 픽셀 박스 내에 맞도록 크기가 커집니다. 이미지 내용은이 상자 ( object-position: center ) 내에서 중앙에 있습니다.

object-fit 속성은 여러 값을 취할 수 있으며, 각각은 컨테이너 내에 이미지가 표시되는 방식에 영향을 미칩니다.

채우기 : 이것은 기본값입니다. 이미지는 컨텐츠 상자를 채우도록 뻗어있어 종횡비를 왜곡 할 수 있습니다.
포함 : 이미지는 컨텐츠 박스 내에 맞는 동안 종횡비를 유지하도록 조정됩니다. 이는 종횡비가 컨테이너의 측면 비율과 다른 경우 이미지가 전체 상자를 채우지 않을 수 있음을 의미합니다.
커버 : 이미지는 전체 컨텐츠 상자를 채우면서 종횡비를 유지하도록 조정되었습니다. 종횡비가 일치하지 않으면 이미지를 자르게 될 수 있습니다.
없음 : 이미지는 전혀 크기가 커지지 않으며 고유 한 크기로 표시됩니다. 이미지가 컨테이너보다 크면 오버플로됩니다.
스케일 다운 : 이미지의 크기는 none contain 않은 것처럼 크기가 작습니다.

이러한 각 값은 설계 요구에 따라 이미지가 제시되는 방식을 관리하는 다른 방법을 제공합니다.

예, object-position 사용하여 object-fit 으로 크기를 조정 한 후 컨테이너 내에서 이미지를 정렬 할 수 있습니다. object-position 속성은 이미지를 배치하기 위해 x 및 y 좌표를 지정하는 한 ~ 두 개의 값을 사용합니다.

object-position 의 구문은 background-position 속성과 유사합니다. 다음은 사용 방법에 대한 몇 가지 예입니다.

이미지 중앙을 중심으로 :

 <code class="css">img { object-position: center; }</code>

로그인 후 복사

이미지를 오른쪽 상단에 배치하려면 :
```
 <code class="css">img { object-position: right top; }</code>
```
로그인 후 복사
정확한 좌표로 이미지를 배치하려면 :
```
 <code class="css">img { object-position: 20% 50%; }</code>
```
로그인 후 복사

이를 통해 컨테이너 내에서 이미지의 정확한 배치를 미세하게 제어 할 수 있으며, 특히 object-fit: cover contain 이미지 크기를 관리 할 때 유용합니다.

이미지가 종횡비를 유지하도록하려면 contain , cover , none 또는 scale-down 값으로 object-fit 속성을 사용해야합니다. 각각이 종횡비를 유지하는 데 도움이되는 방법은 다음과 같습니다.

포함 : 이미지를 가장 큰 크기로 확장하여 너비와 높이가 컨텐츠 상자 안에 맞도록합니다. 이미지의 종횡비가 보존되며 전체 상자를 채우지 않을 수 있습니다.
덮개 : 이것은 이미지를 가장 작은 크기로 확장하여 너비와 높이가 컨텐츠 상자를 완전히 덮을 수 있도록합니다. 이미지의 종횡비는 보존되지만 이미지의 일부는 잘릴 수 있습니다.
없음 : 이미지는 고유 한 크기로 표시됩니다. 크기 조정되지 않으므로 원래 종횡비를 유지합니다.
스케일 다운 : 이것은 none contain 크기가 작거나 동일하게 나타납니다. 컨테이너 내에 맞게 이미지의 크기를 줄이면서 종횡비가 유지되도록합니다.

fill 제외한 이러한 값 중 하나를 사용하면 컨테이너를 장착하거나 채우는 동안 이미지가 종횡비를 유지하는 데 도움이됩니다.

위 내용은 CSS 객체 피트 및 객체 위치를 사용하여 이미지가 표시되는 방식을 제어하려면 어떻게합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!