CSS의 객체 맞춤 및 배경 크기에 대한 심층 분석

HTML 요소에 대해 항상 다른 크기의 이미지를 로드할 수 있는 것은 아닙니다. 이미지의 종횡비에 비례하지 않는 너비와 높이를 사용하면 이미지가 압축되거나 늘어날 수 있습니다. 그것은 좋지 않으며 img 요소에 대한 object-fit 또는 background-size 를 사용하여 해결할 수 있습니다.

먼저 문제를 정의합시다. 다음 그림을 고려하십시오.

왜 이런 일이 발생합니까?

이미지는 종횡비를 가지며 브라우저는 포함 상자를 해당 이미지로 채웁니다. 이미지의 종횡비가 이미지에 대해 지정된 너비 및 높이와 다른 경우 결과는 압축되거나 늘어난 이미지가 됩니다.

다음 그림에서 이를 확인할 수 있습니다.

해결책

이미지의 가로 세로 비율이 포함하는 요소의 너비 및 높이와 일치하지 않을 때 항상 다른 크기의 이미지를 추가할 필요는 없습니다. CSS 솔루션에 대해 알아보기 전에 사진 편집 앱에서 이 작업을 수행하는 방법을 보여 드리고자 합니다.

이제 작동 방식을 이해했으므로 브라우저에서 작동하는 방식에 대해 알아보겠습니다. ( 스포일러 주의: 더 쉽습니다! )

CSS object-fit

object-fit 속성은 img 또는 video 와 같이 대체된 요소의 콘텐츠가 컨테이너에 맞게 크기를 조정해야 하는 방법을 정의합니다. object-fit 의 기본값은 fill 이며, 이로 인해 이미지가 압축되거나 늘어날 수 있습니다.

가능한 값을 살펴보겠습니다.

object-fit 대한 가능한 값

object-fit: contain

이 경우 이미지는 컨테이너의 종횡비에 맞게 크기가 조정됩니다. 이미지의 종횡비가 컨테이너와 일치하지 않으면 레터박스로 표시됩니다.

object-fit: cover

여기에서 이미지도 컨테이너의 가로 세로 비율에 맞게 크기가 조정되며 이미지의 가로 세로 비율이 컨테이너의 가로 세로 비율과 일치하지 않으면 맞게 잘립니다.

object-fit: fill

이렇게 하면 이미지가 컨테이너의 가로 세로 비율에 맞게 크기가 조정되고 이미지의 가로 세로 비율이 컨테이너와 일치하지 않으면 축소되거나 늘어납니다. 우리는 그것을 원하지 않습니다.

object-fit: none

이 경우 이미지의 크기가 전혀 조정되지 않으며 늘어나거나 축소되지 않습니다. cover 값처럼 작동하지만 컨테이너의 종횡비를 존중하지 않습니다.

object-fit 외에도 컨테이너 내에서 이미지를 배치하는 역할을 하는 object-position 속성도 있습니다.

object-position 대한 가능한 값

object-position 속성은 CSS의 background-position 속성과 유사하게 작동합니다.

top 및 bottom 키워드는 포함하는 상자의 가로 세로 비율이 세로로 더 큰 경우에도 작동합니다.

CSS background-size

background-size 의 첫 번째 차이점은 HTML( img ) 요소가 아니라 배경을 처리한다는 것입니다.

background-size 에 가능한 값

background-size 에 가능한 값은 auto , contain 및 cover 입니다.

background-size: auto

auto 를 사용하면 이미지가 기본 크기로 유지됩니다.

background-size: cover

여기서 이미지는 컨테이너에 맞게 크기가 조정됩니다. 종횡비가 동일하지 않으면 이미지가 맞게 마스크됩니다.

background-size: contain

이 경우 이미지는 컨테이너에 맞게 크기가 조정됩니다. 종횡비가 꺼져 있으면 다음 예와 같이 이미지가 레터박스 처리됩니다.

background-position 은 object-position 작동 방식과 유사합니다. 유일한 차이점은 object-position 의 기본 위치가 background-position 의 기본 위치와 다르다는 것입니다.

object-fit 또는 background-size 를 사용하지 않는 경우

요소 또는 이미지에 고정된 높이가 지정되고 background-size: cover 또는 object-fit: cover 가 적용된 경우 이미지가 너무 넓어져 어떻게 영향을 미칠 수 있는 중요한 세부 사항이 손실될 수 있습니다. 사용자는 이미지를 인식합니다.

이미지에 고정 높이가 지정된 다음 예를 고려하십시오.

 .card__thumb { height: 220px; }

카드의 컨테이너가 너무 넓으면 오른쪽에 보이는 것과 같은 결과가 나타납니다(이미지가 너무 넓음). 종횡비를 지정하지 않기 때문입니다.

이에 대한 두 가지 수정 사항 중 하나만 있습니다. 첫 번째는 패딩 핵을 사용하여 고유 비율을 만드는 것입니다.

 .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

두 번째 수정은 새로운 aspect-ratio CSS 속성을 사용하는 것입니다. 이를 사용하여 다음을 수행할 수 있습니다.

 .card__thumb img { aspect-ratio: 4 / 3; }

참고 : 나는 이미 당신이 그것에 대해 배우고 싶은 경우를 대비하여 aspect-ratio 속성에 대해 자세히 썼습니다: "Let's Learn About Aspect Ratio In CSS".

사용 사례 및 예

사용자 아바타

object-fit: cover 는 사용자 아바타입니다. 아바타에 허용되는 가로 세로 비율은 종종 정사각형입니다. 정사각형 컨테이너에 이미지를 넣으면 이미지가 왜곡될 수 있습니다.

 .c-avatar { object-fit: cover; }

로고 목록

비즈니스의 고객을 나열하는 것은 중요합니다. 우리는 종종 이 목적을 위해 로고를 사용할 것입니다. 로고의 크기가 다르기 때문에 왜곡 없이 크기를 조정할 수 있는 방법이 필요합니다.

고맙게도 object-fit: contain 은 이에 대한 좋은 솔루션입니다.

 .logo__img { width: 150px; height: 80px; object-fit: contain; }

기사 썸네일

이것은 매우 일반적인 사용 사례입니다. 기사 축소판의 컨테이너에 항상 동일한 종횡비의 이미지가 있는 것은 아닙니다. 이 문제는 먼저 콘텐츠 관리 시스템(CMS)에서 해결해야 하지만 항상 그런 것은 아닙니다.

 .article__thumb { object-fit: cover; }

영웅 배경

이 사용 사례에서 img 요소를 사용할지 CSS 배경을 사용할지 여부는 다음에 따라 결정됩니다.

• 이미지가 중요한가요? 어떤 이유로 CSS가 비활성화된 경우 사용자에게 이미지가 표시되기를 원합니까?
• 아니면 이미지의 목적이 단지 장식적인 것입니까?

답변에 따라 사용할 기능을 결정할 수 있습니다. 이미지가 중요한 경우:

 <section class="hero"> <img class="hero__thumb" src="thumb.jpg" alt="" /> </section>

 .hero { position: relative; } .hero__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

이미지가 장식적인 경우 background-image 를 사용할 수 있습니다.

 .hero { position: relative; background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg"); background-repeat: no-repeat; background-size: cover; }

이 경우 CSS는 더 짧습니다. 이미지 위에 배치된 모든 텍스트를 읽을 수 있고 액세스할 수 있는지 확인합니다.

object-fit: contain

img 에 배경색을 추가할 수 있다는 것을 알고 계셨습니까? object-fit: contain 을 사용할 때도 이점을 얻을 수 있습니다.

아래 예에는 이미지 격자가 있습니다. 이미지와 컨테이너의 종횡비가 다른 경우 배경색이 나타납니다.

 img { object-fit: contain; background-color: #def4fd; }

비디오 요소

배경으로 video 가 필요했던 적이 있습니까? 그렇다면 아마도 부모의 전체 너비와 높이를 차지하기를 원했을 것입니다.

 .hero { position: relative; background-color: #def4fd; } .hero__video { position: aboslute; left: 0; top: 0; width: 100%; height: 100%; }

부모의 너비와 높이를 완전히 덮도록 하려면 기본 object-fit 값을 재정의해야 합니다.

 .hero__video { /* other styles */ object-fit: cover; }

결론

앞에서 본 것처럼 object-fit 과 background-size 는 서로 다른 이미지 종횡비를 처리하는 데 매우 유용합니다. 우리는 항상 각 이미지의 완벽한 치수를 제어할 수 있는 것은 아니며, 바로 이 두 CSS 기능이 빛을 발하는 부분입니다.

img 요소와 CSS 배경 중에서 선택하는 것이 접근성에 미치는 영향에 대한 친절한 알림: 이미지가 순전히 장식용이라면 CSS 배경으로 이동하십시오. 그렇지 않으면 img 가 더 적합합니다.

이 기사가 유용했기를 바랍니다. 읽어 주셔서 감사합니다.