HTML5에서 비디오의 너비와 높이를 올바르게 설정하는 방법

보통 다음과 같이 설정합니다:

(동영상 공유 학습: html 동영상 튜토리얼)

<video width="320" height="240" controls="controls">

하지만 때로는 동영상 높이를 설정한 후에도 변경되지 않은 경우 상위 항목을 설정할 수 있습니다. 비디오가 상위 요소를 채우는 요소의 너비와 높이입니다. 비디오 태그에 style="width= 100%; height=100%; object-fit: fill"을 추가하기만 하면 됩니다.

object-fit 구문

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

object-fit 값 설명

object-fit은 주로 39000f942b2545a5315c57fa3276f220, 273238ce9338fbb04bee6997e5552b95, a1f02c36ba31691bcfe87b2722de723b, 449d823e1c4e772f50eae2296d6d2cea, 486d7a50595533609bc98d44595dc670, 7e441d6a19e1baa5cd948308fc07d711, 49ee62822bf0c6386fbdcf36ecd91df0 등 기본값은 채우기입니다. object-fill 값에 대한 설명은 다음과 같습니다.

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

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

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

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

scale-down: 콘텐츠 크기를 non 또는 contain로 설정하면 특정 개체가 더 작아집니다.

관련 권장 사항: html5 튜토리얼

위 내용은 HTML5에서 비디오의 너비와 높이를 올바르게 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!