object-fit: fill / contain / cover, 이미지, 비디오 크기 조절

object-fit : fill / contain / cover

- fill : 이미지의 비율이 틀어지더라도 화면에 꽉 채움

- contain : 프레임에 여백이 남더라도 이미지를 자르지않고 비율에 맞게 꽉 채움

- cover : 이미지가 잘리더라도 여백 없이, 비율에 맞게 꽉 채움

--> IE11 이하에서는 동작이 안됨

(background-size와 같은 역할, 이미지 혹은 비디오에 적용할 수 있음)

 

배경으로 쓰이는 이미지/비디오는 opacity 값을 주어 약간 연하게 해주는 것이 보기 좋음