Maison  >  Article  >  interface Web  >  Comment réparer l'ajustement d'objet : distorsion de la couverture dans IE et Edge ?

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

DDD
DDDoriginal
2024-11-03 03:11:02657parcourir

How to Fix Object-Fit: Cover Distortion in IE and 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>
  1. Centrez l'image en utilisant la combinaison suivante :
<code class="css">top: 50%;
left: 50%;
transform: translate(-50%, -50%);</code>
  1. 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!

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