How to Fix Object-Fit: Cover Distortion in IE and Edge?

Resolving Object-Fit: Cover Distortion in IE and Edge

In situations where specific images need to maintain a consistent height using CSS's object-fit: cover; property, users may encounter an issue in IE and Edge browsers. When scaling the browser, the image resizes in width instead of zooming, causing distortion.

To resolve this, consider the following CSS approach:

1. Position the image absolutely within its container:

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

2. Center the image using the following combination:

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

3. Set the following dimensions for the 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>

This approach emulates the effect of object-fit: cover; and ensures consistent behavior across all browsers, including IE and Edge.

For a practical demonstration, refer to:

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

The above is the detailed content of How to Fix Object-Fit: Cover Distortion in IE and Edge?. For more information, please follow other related articles on the PHP Chinese website!