Comment simuler « background-size : cover » pour les éléments HTML comme la vidéo et les images ?

Pouvez-vous simuler la taille de l'arrière-plan : la couverture sur des éléments HTML ?

Taille de l'arrière-plan : la couverture est une propriété CSS essentielle pour mettre à l'échelle les images à s'insérer dans un élément conteneur tout en préservant leurs proportions. Cependant, cette fonctionnalité n'est pas nativement prise en charge pour les éléments HTML tels que les balises vidéo et img.

Atteindre la taille de l'arrière-plan : couvrir avec CSS

Heureusement, il existe un CSS- seule solution qui simule efficacement ce comportement, en éliminant les dépendances de script. Voici l'astuce :

<code class="css">.parent-element-to-video {
    overflow: hidden;
}
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */
}</code>

En réglant la hauteur de la vidéo à 100 %, elle remplit proportionnellement la hauteur de son élément parent. La largeur calculée garantit que le rapport hauteur/largeur de la vidéo est conservé tout en lui permettant d'être mis à l'échelle pour couvrir l'intégralité de l'élément parent si nécessaire. La largeur minimale et la hauteur minimale empêchent la vidéo de se réduire en dessous de ses dimensions naturelles.

Centrer la vidéo

Pour centrer la vidéo dans son élément parent, ajoutez le CSS suivant :

<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 garantit que la vidéo est parfaitement centrée dans tous les cas.

Remarque : Si votre vidéo a un rapport hauteur/largeur différent, ajustez le calculs de largeur et de hauteur minimale en conséquence pour maintenir les proportions souhaitées.

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!