How to Achieve `object-fit: cover` Behavior in IE and Edge?

Fixing Aspect Ratio Issues with Images Using Object-Fit in IE and Edge

Despite the widespread support for CSS's object-fit property, some browsers, such as Internet Explorer (IE) and Microsoft Edge, may exhibit undesirable behavior when scaling images. Images may resize in width instead of height, distorting their aspect ratio.

To address this issue, the following CSS technique can be employed:

1. Position the image absolutely within its container:

   position: absolute;

2. Center the image using a combination of top, left, and transform properties:

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

3. Adjust the image's height and width depending on its orientation:

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

This approach enables the image to mimic the effect of object-fit: cover, ensuring that the aspect ratio is maintained when scaling.

Here is a live demonstration of this technique:

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

This solution is cross-browser compatible, ensuring that images are displayed correctly in IE, Edge, and other modern browsers.

The above is the detailed content of How to Achieve `object-fit: cover` Behavior in IE and Edge?. For more information, please follow other related articles on the PHP Chinese website!