Comment obtenir la fonctionnalité « background-size : cover » sur les éléments HTML avec CSS ?

Comment obtenir la taille de l'arrière-plan : fonctionnalité de couverture sur les éléments HTML avec CSS

Simulation de la fonctionnalité de background-size:cover sur les éléments HTML comme la vidéo ou les images, cela peut être une tâche délicate. Cependant, en utilisant une combinaison de propriétés CSS, il est possible de créer une solution qui imite le comportement souhaité sans aucun script.

La solution CSS

La clé pour obtenir un arrière-plan -size:cover consiste à définir la hauteur, la largeur et les dimensions minimales de l'élément vidéo de manière appropriée. En utilisant des valeurs calculées basées sur le rapport hauteur/largeur de la vidéo (par exemple, 16:9), nous pouvons garantir que la vidéo est toujours mise à l'échelle pour couvrir l'espace disponible tout en conservant son rapport hauteur/largeur.

<code class="css">.parent-element-to-video {
  overflow: hidden;
}

video {
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
}</code>

Ce CSS garantit que la vidéo couvre l'intégralité de l'élément parent, quelle que soit sa taille.

Centrage facultatif

Si nous le souhaitons, nous pouvons également centrer la vidéo au sein de l'élément parent en utilisant les propriétés suivantes :

<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 fonctionne parfaitement sans aucun cas limite, offrant une solution fiable pour simuler background-size:cover sur des éléments vidéo. Il convient de noter que les propriétés CSS3 utilisées peuvent ne pas être compatibles avec les anciens navigateurs. Des solutions basées sur des scripts peuvent donc être nécessaires pour une compatibilité totale entre navigateurs.

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!