브라우저 및 / 또는 부모 요소에 맞게 비디오 크기 조정에 대한 많은 게시물을 읽었지만 필요한 작업을 수행하는 게시물은 없습니다. 단일 페이지 앱이 overflow: hidden있으므로 앱이 스크롤되지 않습니다. 이 앱에는 다양한 display:flex컨테이너 가 있으며 그중 하나에는 16x9 비디오가 필요합니다. 전체 비디오를 항상 컨테이너에 맞추고 싶습니다 (컨테이너가 너무 넓 으면 상단 / 하단에 막대가 있고 컨테이너가 너무 높으면 왼쪽 / 오른쪽에 막대가 있음). width: 100%비디오에서 컨테이너 너비에 따라 크기를 조정하는 데 사용할 수 있지만 컨테이너 높이가 작아지면 크기에 맞게 축소 할 수있는 방법을 찾을 수 없습니다. (대부분의 웹 페이지가 세로로 커지기 때문에 높이에 따라 제한하는 것이 덜 중요하기 때문이라고 생각합니다.)
적어도 Chrome에서는 video태그가 height백분율을 허용하지 않으며 W3C 사양이 이에 동의 한다는 사실을 알아 냈습니다 . 나는 상대 위치 비디오 래퍼로 트릭 을 시도한 padding-bottom: 56.25%다음 절대 위치 비디오를 그 안에 넣었지만 컨테이너가 너무 넓을 때 여전히 비디오 하단이 잘립니다.
여기 jsfiddle이 있습니다. 글을 쓰는 것보다 거기를 보는 것이 더 쉽습니다 : https://jsfiddle.net/darkstarsys/q1fr9jwd/2/ 거기에서 비디오가 컨테이너의 너비에 올바르게 반응하는 것을 볼 수 있지만 비디오의 하단은 다음과 같이 잘립니다. 높이가 작습니다. main요소의 높이와 너비로 재생하여 컨테이너 크기에 어떻게 반응하는지 확인합니다.
가능한 경우 Javascript 기반 솔루션을 피하고 싶습니다. CSS가 어떻게 든 이것을 할 수 있어야하는 것 같습니다.
이것이 당신이 원하는 것인지 확실하지 않지만 시도해보십시오.
.main {
/*overflow: hidden;*/
/* TRY ASPECT RATIOS HERE
800w x 300h doesn't work -- bottom gets cut off */
width: 800px;
height: 300px;
background: red;
}
.video-wrapper {
display: flex;
height: 100%;
}
.video {
width: 100%;
height: auto; /* spec says no percent allowed here */
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다