<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
<source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
</video>
</div>
#mission-statement {
margin-top: 0px;
margin-bottom: auto;
height: 100vh;
width: 100vw;
}
video#bgvid
{width: 100%; height: 100%; position: relative;}
현재이 div의 배경에 비디오가 있습니다. 하지만 현재 화면이 정말 넓을 때는 좌우에 공간이 있고, 정말 좁 으면 상하에 공간이 있습니다.
대신 항상 4면 모두에 닿도록 비디오를 확대 / 축소하고 싶습니다. 브라우저가 좁 으면 영상의 좌우가 잘 리도록 확대됩니다. 브라우저가 정말 넓 으면 상단과 하단이 잘 리도록 확대됩니다.
어떻게 할 수 있습니까?
W3C 표준 (즉 , IE가 아님 ) 을 준수하는 실제 최신 브라우저에만 관심이있는 경우 object-fit:cover. IE가 필수 인 경우 polyfill 이 있지만 그 외에는 정상적이고 논리적 인 모든 것과 충돌하는 것이 명백한 디자인 인 경우 IE와 같은 "브라우저"가 준수하도록 강제하는 데 너무 많은 노력과 시간이 소요됩니다.
전체 페이지 모드로보기
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
#mission-statement {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
video#bgvid {
height: 100vh;
width: 100vw;
object-fit: cover;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid">
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다