개체 맞춤 크로스 브라우저 솔루션

object-fit CSS 속성은 요즘 웹사이트에서 매우 유용하지만 Internet Explorer 및/또는 EDGE(적어도 일부 클라이언트/프로젝트의 경우)를 지원해야 한다는 주의 사항이 있습니다.

따라서 이를 염두에 두고 크로스 브라우저로 만드는 JavaScript 스니펫이 있으며 현재의 폴리필보다 더 간단하고 가볍습니다.

먼저 HTML 및 해당 CSS 속성에 데이터 속성을 추가해야 합니다.

HTML

<img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />

CSS

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

그런 다음 10줄 미만의 JavaScript 코드로 브라우저 간 솔루션을 갖게 됩니다.

ES6 버전

if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(image => {
            (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
            image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
        })
    })
}

또는 트랜스파일러를 사용하지 않는 경우 ES5용으로 트랜스파일된 버전이 있습니다.

if ('objectFit' in document.documentElement.style === false) {
  document.addEventListener('DOMContentLoaded', function () {
    Array.prototype.forEach.call(document.querySelectorAll('img[data-object-fit]'), function (image) {
      (image.runtimeStyle || image.style).background = "url(\"".concat(image.src, "\") no-repeat 50%/").concat(image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit'));
      image.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='".concat(image.width, "' height='").concat(image.height, "'%3E%3C/svg%3E");
    });
  });
}

이 코드는 무엇을 합니까?

브라우저에서 object-fit가 지원되지 않는지 감지하고 지원하는 경우 img를 svg로 바꿉니다.

지원되는 브라우저의 경우 데이터 속성을 통해 CSS 속성을 실행합니다.