IE object-fit cover 대응

IE에서는 이미지나 비디오 태그에 object-fit 속성을 사용할 수 없습니다. 박스 내의 여백을 모두 채우면서 동일한 비율로 크기를 꽉 채우기 위해서는 여러 가지 방법을 사용할 수 있는데, 이미지(img) 속성의 경우에는 object-fit: cover;로 쉽게 적용할 수 있습니다.

 

하지만, IE에서는 사용할 수 없고 IE11부터는 주석처리가 불가능하기 때문에 웹킷 브라우저 등에서 사용이 가능한 object-fit: cover;와 같은 효과를 아래와 같은 방식으로 구현할 수 있습니다.

 

img {
    transform: translateX(-50%) translateY(-50%); 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
}

 

  background-size: cover 사용

 <div class="image" style="background-image: url(img_url)"></div>

.image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

 

ie만 적용되는 style

 

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 //
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      min-width: 100%;
      min-height: 100%;
      width: auto;
      left: 50%;
      transform: translateX(-50%);
    }
}

 

크롬 브라우저별 css, style 다르게 적용하기

 

screen : 미디어 타입이 화면(screen)이라는 의미

-webkit-min-device-pixel-ratio:0 : 단말기의 화소와 실제 화면의 pixel간의 비율이 0 이상이면, -webkit- prefix 로 크롬이나 모바일 브라우저에 적용

@media screen and (-webkit-min-device-pixel-ratio:0){ 
 //
}