Maison  >  Article  >  interface Web  >  Comment obtenir un effet « Taille d'arrière-plan : couverture » ​​cohérent pour

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

Susan Sarandon
Susan Sarandonoriginal
2024-10-30 16:02:03625parcourir

How to Achieve a Consistent et Comment obtenir un effet « Taille d'arrière-plan : couverture » ​​cohérent pour <video> et <img> avec Pure CSS ? avec Pure CSS ? " /> et Comment obtenir un effet « Taille d'arrière-plan : couverture » ​​cohérent pour <video> et <img> avec Pure CSS ? 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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn