HTML5 での video タグの使用法: 親 div タグを自動的に埋める方法

この記事では、Html5 での video タグの使用法、つまり親 div タグを自動的に入力する方法を紹介します。必要な方は参考にしていただければ幸いです。

ビデオが遅い親 div のサイズを自動的に埋めるようにしたい場合は、style="width= 100%; height=100%; object-fit: fill" を video タグに追加するだけです。

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: この値は、置換コンテンツのサイズが要素のコンテンツ ボックスを満たすように設定されます。要素のコンテンツは、たとえその固有のアスペクト比が壊れたとしても、コンテナの形状を完全に埋めるように拡張されます。

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

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

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

スケールダウン: コンテンツ サイズが「なし」または「含む」に設定されている場合、特定のオブジェクトが小さくなります。

関連する推奨事項:

HTML5 の div タグのコード例

HTML5 のタグと共通ルールとは何ですか? HTML5のタグとルールの紹介

以上がHTML5 での video タグの使用法: 親 div タグを自動的に埋める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。