Comment définir correctement la largeur et la hauteur de la vidéo en HTML5

Habituellement, nous le configurons comme ceci :

(Partage de vidéos d'apprentissage : tutoriel vidéo html)

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

Mais parfois nous constatons que la hauteur de la vidéo ne change pas après l'avoir définie. Nous pouvons définir la largeur et la hauteur de son élément parent afin que la vidéo remplisse l'élément parent. Ajoutez simplement style="width= 100%; height=100%; object-fit: fill" à la balise vidéo.

Syntaxe d'ajustement d'objet

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

Description de la valeur d'ajustement d'objet

L'ajustement d'objet convient principalement au remplacement d'éléments, tels que : , < ; objet>, , ,

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 en fonction de la largeur et de 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.

couverture : 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 : Tutoriel 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!