Object-Fit : la couverture échoue dans IE et Edge, comment y remédier ?

Object-Fit : Cover échoue dans IE et Edge, comment y remédier ?

Utilisation de l'object-fit : cover; en CSS pour maintenir une hauteur d'image cohérente, fonctionne de manière transparente sur tous les navigateurs. Cependant, dans IE et Edge, un problème particulier se pose. Lors de la mise à l'échelle du navigateur, l'image est redimensionnée en largeur plutôt que de zoomer en hauteur, ce qui déforme son apparence.

Pour résoudre ce problème, nous utilisons une solution CSS intelligente qui résout le problème :

< pré>position : absolue ;
haut : 50 % ;
gauche : 50 %;
transformation : traduire (-50 %, -50 );
hauteur : 100 %;
largeur : automatique ; // Pour les blocs verticaux
hauteur : auto;
largeur : 100 % ; // Pour les blocs horizontaux

Cette combinaison positionne l'image au centre en utilisant un positionnement absolu, éliminant ainsi le problème d'ajustement d'objet : couverture dans IE et Edge. L'image sera désormais mise à l'échelle proportionnellement, en conservant l'effet souhaité sans distorsion.

Pour illustrer l'efficacité de la solution, considérez la démonstration suivante :

Démonstration de redimensionnement d'image

Cette approche garantit un comportement d'image cohérent dans tous les navigateurs, résolvant efficacement le problème d'ajustement d'objet : couverture dans IE et Edge.

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!