ie에서 object-fit 사용해서 img, video를 background cover 등의 효과 주기

background-image에서 조정할 수도 있지만 바로 img나 video태그에서 cover 효과처럼 적용하고 싶을 때 크롬 등에서는 css 에 object-fit를 적용하면 되는데, ie는 지원하지 않기 때문에 css를 직접 작성해 주게 된다.

 

video {     
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
}

transform: translateX(-50%) translateY(-50%); 

 

 

참고

background-size 속성 (배경이미지 크기 조절) 정리