Comment obtenir l'effet « background-size : cover » avec les éléments `` et `` en utilisant CSS ?

Comment répliquer la taille de l'arrière-plan : la couverture sur et Éléments

Lorsque vous travaillez avec des éléments HTML tels que

Approche CSS

En utilisant CSS seul, vous pouvez créer une simulation de couverture parfaite pour les vidéos sans compter sur des scripts. L'astuce consiste à calculer précisément la largeur et la hauteur de la vidéo par rapport au rapport hauteur/largeur de l'élément parent. Par exemple, si votre vidéo a un format d'image 16:9 :

<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>

Centrage de la vidéo

Si vous devez également centrer la vidéo, le CSS suivant fournira une approche fiable :

<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>

Considérations de compatibilité

Bien que cette solution fonctionne parfaitement dans les navigateurs compatibles CSS3, les navigateurs plus anciens peuvent nécessiter une approche basée sur des scripts pour atteindre le résultat souhaité.

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!