(김유선) 애플티비 사이트 퍼블리싱하기 (2일차)

video 태그 안의 요소와 테두리 요소의 비율이 맞지가 않았다.

                $('.first-vi').css('width','85.101vw');

                $('.first-vi').css('height',$('.first-box').height()-5+'px');

그래서 이렇게 높이를 조절하면 너비도 지정했음에도 불구하고 비율을 지키기 위해 내가 지정한 크기에 맞게 사이즈가 조절되지 않았다.

그렇다고 높이를 지정하지 않으면 틀에서 넘쳐버렸다. 이건 overflow도 아니고 어떻게 해결해야 할지 고민이 됐는데,

뤼튼의 도움을 좀 받았다 ㅎ

 

object-fit이라는 게 있는데, object-fit: contain;을 사용하면 동영상의 비율을 유지하면서 크기를 조절할 수 있고, object-fit: cover;를 사용하면 초과되는 부분을 자동으로 숨길 수 있다.

 

나의 경우에는 비율을 유지하지 않아야 하고, 초과되는 부분을 숨겨줘야 한다.

그래서 object-fit: cover;를 사용했다.

object-fit: cover;를 넣으니 잘 됐다.