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은 주로
fill: 이 값은 boject-fit의 기본값입니다. 대체 콘텐츠의 크기는 요소의 콘텐츠 상자를 채우도록 설정됩니다. 요소의 콘텐츠는 컨테이너의 모양을 완전히 채울 수 있도록 확장됩니다. 이로 인해 본질적인 종횡비가 깨지더라도 마찬가지입니다.
contain: 요소 콘텐츠 컨테이너를 채우기 위해 가로세로 비율을 유지하기 위해 요소 콘텐츠 크기를 대체하고, 해당 특정 개체 크기는 포함하는 요소의 너비와 높이로 구문 분석됩니다. 즉, 대체 요소에 명시적인 높이와 너비를 설정하면 이 값으로 인해 콘텐츠의 크기가 고정 비율로 정확하게 조정되지만 여전히 요소 크기 내에 있습니다.
cover: 요소 콘텐츠 크기를 대체하여 가로세로 비율을 유지하여 요소 콘텐츠 컨테이너를 채우고 해당 개체의 특정 개체 크기를 분석하여 전체 요소의 너비와 높이를 덮습니다. 즉, 대체 요소 콘텐츠 크기는 종횡비를 유지하지만 콘텐츠 요소를 완전히 덮도록 너비와 높이를 변경합니다.
none: 대체된 요소 콘텐츠는 내부 요소의 컨테이너에 맞게 크기가 조정되지 않으며, 콘텐츠는 요소에 설정된 높이와 무게를 완전히 무시하며 여전히 요소 크기 내에 표시됩니다.
scale-down: 콘텐츠 크기를 non 또는 contain로 설정하면 특정 개체가 더 작아집니다.
관련 권장 사항: html5 튜토리얼
위 내용은 HTML5에서 비디오의 너비와 높이를 올바르게 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
