HTML5 での video タグの使用法: 親 div タグを自動的に埋める方法-H5 チュートリアル-php.cn

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

不言

リリース： 2018-08-09 15:43:21

オリジナル

3582 人が閲覧しました

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

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