Maison > interface Web > Tutoriel H5 > le corps du texte

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

不言
Libérer: 2018-08-09 15:43:21
original
3549 Les gens l'ont consulté

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
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal