


Comment simuler « background-size : cover » pour les éléments HTML comme la vidéo et les images ?
Oct 30, 2024 pm 05:18 PMPouvez-vous simuler la taille de l'arrière-plan : la couverture sur des éléments HTML ?
Taille de l'arrière-plan : la couverture est une propriété CSS essentielle pour mettre à l'échelle les images à s'insérer dans un élément conteneur tout en préservant leurs proportions. Cependant, cette fonctionnalité n'est pas nativement prise en charge pour les éléments HTML tels que les balises vidéo et img.
Atteindre la taille de l'arrière-plan : couvrir avec CSS
Heureusement, il existe un CSS- seule solution qui simule efficacement ce comportement, en éliminant les dépendances de script. Voici l'astuce :
<code class="css">.parent-element-to-video { overflow: hidden; } video { height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */ }</code>
En réglant la hauteur de la vidéo à 100 %, elle remplit proportionnellement la hauteur de son élément parent. La largeur calculée garantit que le rapport hauteur/largeur de la vidéo est conservé tout en lui permettant d'être mis à l'échelle pour couvrir l'intégralité de l'élément parent si nécessaire. La largeur minimale et la hauteur minimale empêchent la vidéo de se réduire en dessous de ses dimensions naturelles.
Centrer la vidéo
Pour centrer la vidéo dans son élément parent, ajoutez le CSS suivant :
<code class="css">/* Merge with above CSS */ .parent-element-to-video { position: relative; /* or absolute or fixed */ } video { position: absolute; left: 50%; /* % of surrounding element */ top: 50%; transform: translate(-50%, -50%); /* % of current element */ }</code>
Cette approche garantit que la vidéo est parfaitement centrée dans tous les cas.
Remarque : Si votre vidéo a un rapport hauteur/largeur différent, ajustez le calculs de largeur et de hauteur minimale en conséquence pour maintenir les proportions souhaitées.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
