HTML5のvideoタグで動画の幅と高さを設定する方法

この記事の内容は、HTML5 での video タグの幅と高さを設定する方法についてです。必要な方は参考にしていただければ幸いです。

通常:

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

しかし、ビデオの高さが設定後に変更されていないことが判明する場合があります。ビデオが親要素を満たすように親要素の幅と高さを設定できます。 style="width= 100%; height=100%; object-fit: fill" を video タグに追加するだけです。

object-fit 構文

object-fit:fill は、次のような要素を置換するのに適しています。コード ><video>、<object>、<img>、<input type="image">コード >、<code><svg></svg>、<image></image>、<video></video> など。デフォルト値は fill です。 object-fill 値の説明は次のとおりです。

• fill: この値は、boject-fit のデフォルト値です。置換コンテンツのサイズが設定されます。つまり、要素のコンテンツは、コンテナの固有のアスペクト比が崩れる場合でも、コンテナの外形を完全に埋めるように拡張されます。

• <video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill。object-fill取值的说明如下：

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

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

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

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

  •  scale-down：当内容大小设置了non或contain contains: 要素コンテンツのサイズを置き換えて、要素コンテンツ コンテナを満たすアスペクト比を維持します。その特定のオブジェクト サイズは、含まれる要素の幅と高さとして解析されます。つまり、置換要素に明示的な高さと幅を設定すると、この値によってコンテンツのサイズが固定比率で正確に調整されますが、要素の寸法内に収まります。

• cover: 要素コンテンツのサイズを置き換えて、要素コンテンツ コンテナーを満たすアスペクト比を維持します。その特定のオブジェクト サイズは、要素全体の幅と高さをカバーするために解析されます。つまり、置換要素のコンテンツ サイズはアスペクト比を維持しますが、コンテンツ要素を完全に覆うように幅と高さを変更します。

• none: 置換された要素のコンテンツは、内部要素のコンテナーに合わせてサイズ変更されません。コンテンツは、要素に設定された高さと重みを完全に無視し、要素の寸法内で表示されます。

• スケールダウン: コンテンツ サイズが non または contain に設定されている場合、特定のオブジェクトが小さくなります。 🎜🎜おすすめ関連記事: 🎜🎜🎜HTML5におけるpostMessageのクロスドメインコード解析🎜🎜🎜🎜html5におけるビデオ(video)要素の解析🎜🎜🎜🎜html5におけるオーディオ(audio)の解析🎜🎜

以上がHTML5のvideoタグで動画の幅と高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。