html5의 비디오 태그에서 비디오의 너비와 높이를 설정하는 방법

이 글의 내용은 HTML5에서 동영상 태그의 너비와 높이를 설정하는 방법에 대한 내용입니다. 필요한 친구들이 참고하시면 도움이 될 것입니다.

일반적으로:

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

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

object-fit 구문

object-fit:fill | 포함 | 없음 | scale-down

object-fit 값 설명

object-fit은 다음과 같은 요소를 대체하는 데 적합합니다. 코드 >, , <img alt="html5의 비디오 태그에서 비디오의 너비와 높이를 설정하는 방법" >, <input type="image"> code >, <code><svg></svg>, <image></image> 및 <video></video> 등 기본값은 채우기입니다. object-fill 값에 대한 설명은 다음과 같습니다. <video></video>、<object></object>、<img alt="html5의 비디오 태그에서 비디오의 너비와 높이를 설정하는 방법" >、<input type="image">、<svg></svg>、<image></image>和<video></video>等。其默认值为fill。object-fill取值的说明如下：

•  fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。

•  contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。

•  cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。

•  none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。

•  scale-down：当内容大小设置了non或contain

  • fill: 이 값은 boject-fit의 기본값으로 대체 콘텐츠의 크기가 설정됩니다. 즉, 본질적인 가로 세로 비율이 깨지더라도 요소의 콘텐츠가 컨테이너의 외부 크기를 완전히 채울 수 있도록 확장됩니다.

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

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

• 없음: 대체된 요소 콘텐츠는 내부 요소의 컨테이너에 맞게 크기가 조정되지 않으며, 콘텐츠는 요소에 설정된 높이와 가중치를 완전히 무시하며 여전히 요소 크기 내에 표시됩니다.
  🎜🎜🎜
• 🎜scale-down: 콘텐츠 크기를 비 또는 포함으로 설정하면 특정 개체가 더 작아집니다. 🎜🎜🎜🎜 추천 관련 기사: 🎜🎜🎜HTML5의 postMessage의 도메인 간 코드 분석 🎜🎜🎜🎜html5의 비디오(비디오) 요소 분석 🎜🎜🎜🎜html5의 오디오(오디오) 분석🎜🎜

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