IE에서도 CSS에 의한 이미지의 트리밍을 하고 싶다(object-fit의 IE11 대응)

소개

아바타 등 사용자가 업로드한 이미지를 특정 영역 내에 표시하고 싶다는 경우가 프런트 엔드 구현을 하고 있다고 하면 됩니다.

그런 경우에는 object-fit 라는 멋진 CSS 프로퍼티가 있으므로, 이것만 사용하고 있으면 대체로 부족합니다만, 유감스럽게도 IE는 이 object-fit 프로퍼티에 대응하고 있지 않습니다.

참고 Can I use: object-fit/object-position


이미 IE는 비추천 브라우저이므로 대응하지 않으면 할 수 있으면 좋지만, 안건에 따라서는 IE11 대응을 요구할 수도 있습니다. 그러한 경우에 어떻게 하면 object-fit 같은 구현을 IE에서도 할 수 있을까를 본 기사에 기재합니다.

대응 내용

같은 고민을 안고 있던 엔지니어가 많았던 것 같고, 훌륭한 선인이 object-fit-images 라는 라이브러리로 이미 IE의 object-fit .

참고 : object-fit-images

yarn add object-fit-images 에 라이브러리 추가

아래 코드와 같이 object-fit를 사용하려는 img 태그에 font-family의 설명을 추가합니다.

.your-favorite-image {
    object-fit: contain;/* ← これでIE以外のブラウザは対応可能*/
    font-family: 'object-fit: contain;';/* ←の記載をIEのPolyfil用に追加*/
}

3. </body> 앞이나 DOM 로딩이 끝난 시점에서 objectFitImages() 를 호출합니다.
( objectFitImages에 선택기를 전달하여 Polyfil의 대상을 지정할 수도 있습니다)

=> background-image 등으로 'object-fit 상당한 표현이 되어 있는 것을 확인할 수 있습니다.

보충사항

1. 기본 거동object-fit-images 는 기본적으로 모든 img 태그를 대상으로 합니다.

2. objectFitImages 호출 타이밍object-fit-images 는 object-fit 의 타겟이 되는 Element 의 src 속성/srcset 속성을 읽어 처리합니다.
그 때문에, React/Vue/jQuery 등 동적으로 DOM을 생성하는 경우는 src 속성/srcset 속성이 반영된 후에 objectFitImages 의 호출을 할 필요가 있습니다.

마지막으로

DOM을 동적으로 생성하고 있는 경우는 주의가 필요합니다만, IE에서의 화상 대응 어떻게 하려고 하는 경우에 이 라이브러리를 이용하면 적은 코드량으로 구현할 수 있기 때문에 도움이 되었습니다.

자신도 이런 가려운 곳에 손이 닿는 라이브러리를 OSS로 공개하고 싶다고 생각했습니다.