IE에서 object-fit 속성처럼 적용하는 방법

IE에서 object-fit 속성처럼 적용하는 방법

IE에서는 object-fit 속성을 사용할 수 없다. 박스 내의 여백을 모두 채우면서 동일한 비율로 크기를 꽉 채우기 위해서는 여러 가지 방법을 사용할 수 있는데, 이미지(img) 속성의 경우에는 object-fit: cover;로 쉽게 적용할 수 있다. 하지만, IE에서는 사용할 수 없고 IE11부터는 주석처리가 불가능하기 때문에 웹킷 브라우저 등에서 사용이 가능한 object-fit: cover;와 같은 효과를 아래와 같은 방식으로 구현할 수 있다.

    -webkit-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -o-transform: translateX(-50%) translateY(-50%); 

    <!-- 아래와 같이 속성을 선언한다. -->
    transform: translateX(-50%) translateY(-50%); 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 

위와 같이 적용할 경우, 박스 공간을 이미지가 가득 채우면서도 이미지가 중앙정렬이 되며, 비율을 유지한다.

IE에서 비율이 깨지는 현상

이 상태에서 위의 코드를 적용한다. 기존에는 object-fit이 적용되어 있지만, IE에서는 비율이 깨지기 때문에 보기가 좋지 않다. 따라서 그대로 위의 속성을 적용하게 되면 아래와 같이 구현된다.

적용된 이미지

이렇게 비율은 유지한채 크기가 확대되고 박스의 여백을 가득 채울 수 있게 된다. IE에서는 주석처리가 안되고 CSS 지원이 안 되는 속성이 많기 때문에 이러한 방법으로도 IE에서 비슷한 효과를 낼 수 있다. 단일 이미지의 경우에는 배경 속성을 활용하는 것이 더 간단할 수 있다.