Comment obtenir le comportement « taille d'arrière-plan : couverture » sur les éléments vidéo et image en utilisant uniquement CSS ?

Obtention du comportement « taille d'arrière-plan : couverture » ​​sur les éléments vidéo et d'image

Lorsque vous cherchez à simuler la fonctionnalité de « taille d'arrière-plan : couverture » : cover" sur des éléments comme

Le problème avec les solutions précédentes

La solution de Timothy, bien qu'efficace dans certains scénarios, échoue pour gérer correctement la mise à l'échelle, ce qui entraîne des effets de zoom indésirables lorsque l'élément parent de la vidéo est plus petit que le fichier vidéo.

La solution améliorée

Si le rapport hauteur/largeur de la vidéo est connu , tel que 16:9, ce code CSS obtiendra l'effet souhaité :

<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 code définit la hauteur à 100 % du conteneur et la largeur à une valeur calculée en fonction du rapport hauteur/largeur. La largeur et la hauteur minimales garantissent une réduction si le conteneur est plus petit que le fichier vidéo.

Centrage de la vidéo

Pour le centrage, utilisez le CSS suivant :

<code class="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>

Cela positionne la vidéo de manière absolue et utilise la traduction pour la centrer dans son élément parent.

Considérations de compatibilité

Notez que VW, VH et transform sont des fonctionnalités CSS3. Pour la compatibilité avec les anciens navigateurs, vous devrez peut-être recourir à JavaScript.

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!