Comment obtenir un comportement « object-fit : cover » dans IE et Edge ?

Résolution des problèmes de format d'image avec les images à l'aide de l'ajustement d'objet dans IE et Edge

Malgré la prise en charge généralisée de la propriété d'ajustement d'objet de CSS, certains les navigateurs, tels qu'Internet Explorer (IE) et Microsoft Edge, peuvent présenter un comportement indésirable lors de la mise à l'échelle des images. Les images peuvent être redimensionnées en largeur plutôt qu'en hauteur, ce qui déforme leur rapport hauteur/largeur.

Pour résoudre ce problème, la technique CSS suivante peut être utilisée :

1. Positionnez l'image absolument à l'intérieur son conteneur :

   position: absolute;

2. Centrez l'image à l'aide d'une combinaison de propriétés haut, gauche et transformation :

   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

3. Ajustez le la hauteur et la largeur de l'image en fonction de son orientation :

   // Vertically-oriented blocks
   height: 100%;
   width: auto;
   
   // Horizontally-oriented blocks
   height: auto;
   width: 100%;

Cette approche permet à l'image d'imiter l'effet d'ajustement d'objet : couverture, garantissant que le rapport hauteur/largeur est maintenu lors de la mise à l'échelle.

Voici une démonstration en direct de cette technique :

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

Cette solution est compatible avec tous les navigateurs, garantissant que les images s'affichent correctement dans IE, Edge et d'autres navigateurs modernes.

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!