CSS 개체 맞춤으로 이미지 크기 조정 및 자르기 방법

소개

이미지로 작업할 때 원래 종횡비를 유지하려는 시나리오에 직면하게 될 것입니다. 종횡비를 유지하면 이미지가 늘어나거나 찌그러져 왜곡되어 나타나는 것을 방지할 수 있습니다. 이 문제에 대한 일반적인 해결책은 background-image CSS 속성을 사용하는 것입니다. 보다 현대적인 접근 방식은 object-fit CSS 속성을 사용하는 것입니다.

이 문서에서는 fill, cover, contain, none 및 scale-down object-fit CSS 속성에 사용할 수 있는 값과 이미지를 자르고 크기를 조정하는 방법. 또한 object-position CSS 속성과 이 속성이 이미지를 상쇄하는 방법을 살펴봅니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

CSS 속성 및 값 이해.
style 속성과 함께 인라인으로 CSS 선언 사용.
코드 편집기.
object-fit 및 object-position을 지원하는 최신 웹 브라우저입니다.

샘플 이미지의 기본 동작 관찰

샘플 이미지를 표시하는 데 사용되는 다음 코드를 고려하십시오.

<img
  src="https://assets.linux-console.net/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 600px; height: 337px;"
  alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

이 이미지의 원래 너비는 1200px이고 높이는 674px입니다. img 속성을 사용하여 너비가 600 및 337(원래 크기의 절반)로 설정되어 종횡비를 유지합니다.

이제 레이아웃에서 이미지가 300px의 너비와 337px의 높이를 차지할 것으로 예상하는 상황을 고려하십시오.

<img
  src="https://assets.linux-console.net/articles/alligator/css/object-fit/example-object-fit.jpg"
  width="600"
  height="337"
  style="width: 300px; height: 337px;"
  alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

결과 이미지는 더 이상 원래 종횡비를 유지하지 않으며 시각적으로 "압축된\ 것처럼 보입니다.

객체 맞춤 사용: 채우기

fill 값은 object-fit의 초기 값입니다. 이 값은 원래 종횡비를 유지하지 않습니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: fill;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

이것은 브라우저 렌더링 엔진의 "초기\ 값이므로 크기가 조정된 이미지에서 모양이 변경되지 않습니다. 결과 이미지는 여전히 찌그러져 나타납니다.

객체 맞춤 사용: 커버

cover 값은 원래 가로세로 비율을 유지하지만 이미지가 사용 가능한 모든 공간을 차지합니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

특정 상황에서 object-fit: cover는 이미지가 잘린 것처럼 보이게 합니다. 이 예제 이미지에서는 원본 이미지의 왼쪽과 오른쪽 일부가 선언된 너비 범위에 맞지 않아 나타나지 않습니다.

객체 맞춤 사용: 포함

contain 값은 원래 가로 세로 비율을 유지하지만 이미지는 사용 가능한 공간의 경계를 초과하지 않도록 제한됩니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: contain;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

특정 상황에서 object-fit: contain은 이미지가 사용 가능한 모든 공간을 채우지 못하는 결과를 낳습니다. 이 예제 이미지에서는 선언된 높이가 축소된 높이보다 크기 때문에 이미지 위와 아래에 세로 공간이 있습니다.

객체 맞춤 사용: 없음

none 값은 이미지 크기를 전혀 조정하지 않습니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: none;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

이미지가 사용 가능한 공간보다 큰 경우 잘려서 표시됩니다. 이 예제 이미지에서는 원본 이미지의 왼쪽, 오른쪽, 위쪽, 아래쪽 일부가 선언된 너비와 높이의 범위에 맞지 않아 나타나지 않습니다.

객체 맞춤 사용: 축소

scale-down 값은 더 작은 이미지를 생성하는 방식에 따라 contain 또는 none과 같은 이미지를 표시합니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: scale-down;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

이 예제 이미지에서 이미지는 contain처럼 동작하도록 축소되었습니다.

객체 맞춤 및 객체 위치 사용

object-fit의 결과 이미지가 잘려 보이면 기본적으로 이미지는 중앙에 나타납니다. object-position 속성을 사용하여 초점을 변경할 수 있습니다.

이전의 object-fit: cover 예제를 고려하십시오.

이제 X축에서 이미지의 보이는 부분의 위치를 변경하여 이미지의 가장 오른쪽 가장자리를 표시해 보겠습니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

이 예제 이미지에서 거북이는 이미지에서 잘렸습니다.

마지막으로 위치가 사용 가능한 공간의 경계를 벗어나 지정되면 어떤 일이 발생하는지 살펴보겠습니다.

<img
  ...
  style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
  ...
/>

이 코드는 브라우저에서 다음 결과를 생성합니다.

이 예제 이미지에서 거북이와 악어 머리는 이미지에서 잘렸습니다. 이미지 왼쪽에 오프셋의 20%를 구성하는 간격도 있습니다.

결론

이 문서에서는 object-fit 및 object-position CSS 속성에 사용할 수 있는 값을 탐색했습니다.

object-fit도 상속, 초기 및 설정 해제를 지원합니다.

프로젝트에서 object-fit을 사용하기 전에 Can I Use?에서 브라우저 지원을 확인하여 대상 사용자가 사용하는 브라우저에서 지원되는지 확인하십시오.

CSS에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 CSS 주제 페이지를 확인하십시오.