Html5에서 비디오 태그 사용: 상위 div 태그를 자동으로 채우는 방법-H5 튜토리얼-php.cn

Html5에서 비디오 태그 사용: 상위 div 태그를 자동으로 채우는 방법

不言

풀어 주다： 2018-08-09 15:43:21

원래의

3528명이 탐색했습니다.

이 글에서는 HTML5의 video 태그 사용법을 소개합니다. 상위 div 태그를 자동으로 채우는 방법입니다. 필요한 친구가 참고하면 도움이 될 것입니다.

비디오가 느린 상위 div의 크기를 자동으로 채우도록 하려면 비디오 태그에 style="width= 100%; height=100%; object-fit: fill"을 추가하기만 하면 됩니다.

object-fit 구문

object-fit 속성의 구문은 매우 간단합니다.

object-fit:fill | contain | cover | none | scale-down

로그인 후 복사

object-fit 값 설명

object-fit은 주로 다음과 같은 요소를 대체하는 데 적합합니다. <video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill. object-fill 값에 대한 설명은 다음과 같습니다.

fill: 이 값은 boject-fit의 기본값입니다. 대체 콘텐츠의 크기는 요소의 콘텐츠 상자를 채우도록 설정됩니다. 요소의 콘텐츠는 컨테이너의 모양을 완전히 채울 수 있도록 확장됩니다. 이로 인해 본질적인 종횡비가 깨지더라도 마찬가지입니다.

포함: 요소 콘텐츠 컨테이너를 채우기 위해 가로 세로 비율을 유지하기 위해 요소 콘텐츠 크기를 대체하고, 해당 특정 개체 크기는 포함 요소의 너비와 높이로 구문 분석됩니다. 즉, 대체 요소에 명시적인 높이와 너비를 설정하면 이 값으로 인해 콘텐츠의 크기가 고정 비율로 정확하게 조정되지만 여전히 요소 크기 내에 있습니다.

표지: 요소 콘텐츠 크기를 대체하여 가로세로 비율을 유지하여 요소 콘텐츠 컨테이너를 채우고, 특정 개체 크기를 분석하여 전체 요소의 너비와 높이를 덮습니다. 즉, 대체 요소 콘텐츠 크기는 종횡비를 유지하지만 콘텐츠 요소를 완전히 덮도록 너비와 높이를 변경합니다.

없음: 대체된 요소 콘텐츠는 내부 요소의 컨테이너에 맞게 크기가 조정되지 않으며 콘텐츠는 요소에 설정된 높이와 무게를 완전히 무시하며 여전히 요소 크기 내에 표시됩니다.

축소: 콘텐츠 크기가 없음 또는 포함으로 설정되면 특정 개체가 더 작아집니다.