Comment résoudre le problème « object-fit : cover » dans IE et Edge ?

Correction de l'ajustement des objets : problème de couverture dans IE et Edge

Dans cette situation, où les images sont destinées à maintenir une hauteur constante lors de l'utilisation object-fit : cover, un défi se pose dans les navigateurs IE et Edge. Au lieu de zoomer sur l'image, ces navigateurs modifient sa largeur, entraînant une apparence déformée.

Pour résoudre ce problème, une combinaison de techniques CSS peut être utilisée :

1. Centrer l'image : Grâce à la propriété de positionnement absolu, placez l'image au centre de son conteneur. Ceci est réalisé avec le code suivant :

<code class="css">position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>

2. Ajuster la taille de l'image : En fonction de l'orientation de l'image (verticale ou horizontale), ajustez sa hauteur et la largeur en conséquence :

<code class="css">// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;</code>

Cette combinaison de CSS permet l'ajustement d'objet souhaité : effet de couverture, garantissant que l'image est mise à l'échelle et zoome comme prévu dans les navigateurs IE et Edge tout en conservant une hauteur cohérente dans d'autres navigateurs.

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!