How to Fix the `object-fit: cover` Issue in IE and Edge?

Fixing Object-Fit: Cover Issue in IE and Edge

In this situation, where images are intended to maintain a consistent height while using object-fit: cover, a challenge arises in IE and Edge browsers. Instead of zooming the image, these browsers alter its width, leading to a distorted appearance.

To address this issue, a combination of CSS techniques can be employed:

1. Center the image: Using the absolute positioning property, place the image in the center of its container. This is achieved with the following code:

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

2. Adjust the image size: Based on the orientation of the image (vertical or horizontal), adjust its height and width accordingly:

<code class="css">// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;</code>

This combination of CSS allows for the desired object-fit: cover effect, ensuring that the image scales and zooms as intended in IE and Edge browsers while maintaining a consistent height in other browsers.

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