Comment réparer l'ajustement d'objet : distorsion de la couverture dans IE et Edge ?

Résolution de l'ajustement d'objet : distorsion de la couverture dans IE et Edge

Dans les situations où des images spécifiques doivent maintenir une hauteur constante à l'aide de l'ajustement d'objet : cover ; propriété, les utilisateurs peuvent rencontrer un problème dans les navigateurs IE et Edge. Lors de la mise à l'échelle du navigateur, l'image est redimensionnée en largeur au lieu d'être zoomée, provoquant une distorsion.

Pour résoudre ce problème, envisagez l'approche CSS suivante :

1. Positionnez l'image absolument dans son conteneur :

<code class="css">position: absolute;</code>

2. Centrez l'image en utilisant la combinaison suivante :

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

3. Définissez les dimensions suivantes pour l'image :

<code class="css">// For vertical blocks (height greater than width):
height: 100%;
width: auto;

// For horizontal blocks (width greater than height):
height: auto;
width: 100%;</code>

Cette approche émule l'effet d'ajustement d'objet : couverture ; et garantit un comportement cohérent sur tous les navigateurs, y compris IE et Edge.

Pour une démonstration pratique, reportez-vous à :

https://jsfiddle.net/furqan_694/s3xLe1gp/

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!