Comment obtenir un effet « Taille d'arrière-plan : couverture » ​​cohérent pour et avec Pure CSS ?

et avec Pure CSS ? " /> et avec Pure CSS ? " />

Simulation d'arrière-plan de couverture pour

Obtention d'un effet « taille d'arrière-plan : couverture » ​​cohérent pour des éléments tels que < video> et est un défi de longue date.

Solution CSS sans Edge Cases :

Au lieu de s'appuyer sur des scripts, une solution CSS sans Les cas extrêmes peuvent être implémentés en suivant les étapes suivantes :

1. Définissez l'élément parent pour qu'il ait un débordement : caché.
2. Définissez l'élément vidéo ou image sur hauteur : 100 % ;.
3. Calculez la largeur en fonction du rapport hauteur/largeur (par exemple, 100 * 16/9 pour les vidéos 16:9).
4. Définissez la largeur minimale : 100 % ; pour éviter un redimensionnement plus petit que le parent.
5. Définissez la hauteur minimale pour garantir que la hauteur diminue proportionnellement.

Exemple :

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

Vidéo centrée :

Pour centrer la vidéo, utilisez le CSS suivant :

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

video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}</code>

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!