HTML5でビデオの幅と高さを正しく設定する方法

通常は次のように設定します:

(学習ビデオ共有: html ビデオ チュートリアル)

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

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

object-fit 構文

object-fit:fill | contain | cover | none | scale-down

object-fit 値の説明

object-fit は主に、

fill: この値は boject-fit のデフォルト値です。置換コンテンツのサイズは、要素のコンテンツ ボックスを満たすように設定されます。 、要素のコンテンツは、たとえコンテナの固有のアスペクト比が壊れていたとしても、コンテナの外形寸法を完全に埋めるように拡張されます。

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

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

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

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

関連する推奨事項: html5 チュートリアル

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