object-fit이 적용 안될때

 

에러상황 

이미지 크기를 부모태그인 div크기에 맞춰 
비율에 따라 반응형으로 조절하게 하고 싶어서 

object-fit 속성을 contain으로 설정하였으나 

적용되지 않았음.

 

      <div className="chart">
        <img src={chart} alt="chartBanana" className="chart--img" />
      </div>

 

 

 

해결 방법 

이미지태그에 width와 height를 100%로 적용하여 

부모태그의 높이와 너비를 알려주고, 

그다음에 object-fit을 설정하였더니 잘 적용되었다. 

 

 

에러의 원인

Object-fit not affecting images

 

 

 

이미지의 경우 브라우저는 두 단계로 작업을 수행합니다:

1. 바운딩 박스 생성: 기본적으로 상자의 크기는 이미지 자체의 정확한 크기가 됩니다. 그러나 우리는 브라우저에게 이미지를 컨테이너의 너비와 높이의 100%로 크기 조정하도록 지시할 수 있습니다. 그런 다음 브라우저는 컨테이너 공간을 완전히 채우는 상자를 생성합니다.

2. 이미지 픽셀을 이 상자에 맞춤: 기본적으로 이미지는 상자의 너비에 이미지 너비가 일치하고 이미지 높이가 상자 높이에 일치하도록 압축/늘이기됩니다. 그러나 object-fit을 사용하여 이미지와 상자의 크기를 어떻게 맞출지 선택할 수 있습니다. 예를 들어, object-fit: cover를 사용하여 이미지를 완전히 채우면서 종횡비를 유지하는 방식으로 이미지를 확대/축소할 수 있습니다.

 

 

요약하자면

브라우저는 바운딩박스를 생성하게 되는데 , 그 박스의 크기는 이미지의 정확한 크기가 된다. 

이미지는 박스의 너비와 높이에 일치하도록 압축/ 늘이기를 하는데, 

object-fit으로 어떻게 맞출지 선택할 수 있다. 

 

object-fit을 하려면 width와 height를 적용해야 작동하게 된다.