Utilisation de la balise vidéo en HTML5 : comment remplir automatiquement la balise div parent

Cet article vous présente l'utilisation de la balise vidéo en HTML5 : comment remplir automatiquement la balise div parent. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Si vous souhaitez que la vidéo remplisse automatiquement la taille du div parent lent, ajoutez simplement style="width= 100%; height=100%; object-fit: fill" à la balise vidéo.

syntaxe d'ajustement d'objet

La syntaxe de l'attribut d'ajustement d'objet est très simple :

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

description de la valeur d'ajustement d'objet

objet- ajustement Convient principalement au remplacement d'éléments, tels que : <video>, <object>, <img>, <input type="image">, <svg>, <svg:image> et <svg:video>, etc. Sa valeur par défaut est fill. La description de la valeur de remplissage d'objet est la suivante :

fill : Cette valeur est la valeur par défaut de object-fit. La taille du contenu de remplacement est définie pour remplir la zone de contenu de l'élément, c'est-à-dire. , le contenu de l'élément est étendu pour remplir complètement les dimensions extérieures du conteneur, même si cela brise son rapport hauteur/largeur intrinsèque.

contain : remplacez la taille du contenu de l'élément pour conserver les proportions nécessaires pour remplir le conteneur de contenu de l'élément, et sa taille d'objet spécifique est analysée comme la largeur et la hauteur d'un élément conteneur. Autrement dit, si vous définissez une hauteur et une largeur explicites sur l'élément de remplacement, cette valeur entraînera la taille du contenu exactement au rapport fixe, mais toujours dans les dimensions de l'élément.

cover : remplacez la taille du contenu de l'élément pour conserver le rapport hauteur/largeur afin de remplir le conteneur de contenu de l'élément, et sa taille d'objet spécifique est analysée pour couvrir la largeur et la hauteur de l'élément entier. Autrement dit, la taille du contenu de l'élément de remplacement conserve le rapport hauteur/largeur, mais modifie la largeur et la hauteur afin qu'elle recouvre complètement l'élément de contenu.

aucun : le contenu de l'élément remplacé n'est pas redimensionné pour s'adapter au conteneur de l'élément interne. Le contenu ignore complètement toute hauteur et tout poids définis sur l'élément et s'affiche toujours dans les dimensions de l'élément.

réduction : lorsque la taille du contenu est définie sur non ou contenant, l'objet spécifique deviendra plus petit.

Recommandations associées :

Exemples de codes pour les balises div en HTML5

Quelles sont les balises et les règles communes en HTML5 ? Introduction aux balises et règles html5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!