div에 비디오를 전체 화면으로 깔기

1865 단어 web프런트엔드

요구 사항


쓸데없는 말 말고 직접 수요해라.5500*500의div에서div의 비디오를 자동으로 가득 채우고 전체 화면을 표시해야 합니다.그림 1:

아버지를 함정에 빠뜨리다


이렇게 써 보시면:
.video {
        width: 500px;
        height: 500px;
        background-color: #bbc13d;
        margin: 50px auto;
    }

.video video {
        width: 100%;
        height: 100%;
        display: block;
    }

사장이나 고객이 만족하지 않을 것 같은데, 내가 분명히 너에게 전체 화면을 깔라고 했는데, 너는 왜 나에게 중간을 차지하라고 했니?

하나의 속성이 해결해 드릴게요.


자, 이 속성object-fit: fill;을 당신의 귀여운 video 라벨에 추가하면 전체 화면의 비디오를 얻을 수 있습니다.어떤 js로 div폭을 계산하지 마세요. 자극적인 거 아니에요?그림 2:

호환성


그림3: 푸~, 극악무도한 i!하지만 i를 별로 생각하지 않는다면 간단하면서도 강력한 속성을 사용해 보세요.

좋은 웹페이지 즐겨찾기