How to Achieve `object-fit: cover;` Image Scaling in IE and Edge?

CSS Fix for Image Scaling in IE and Edge

When using the object-fit: cover; CSS rule for images on a page, one might encounter an issue where the image resizes in width (not height) instead of zooming when scaling the browser in IE or Edge. This results in a distorted image.

To address this issue, a CSS solution can be implemented:

1. Position the image absolutely within its container using the following code:

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

This centers the image within its container.

2. Based on the orientation of the image (vertical or horizontal), set the height and width properties accordingly:

• For vertical blocks (height greater than width):

  height: 100%;
  width: auto;

• For horizontal blocks (width greater than height):

  height: auto;
  width: 100%;

This gives the image the desired object-fit: cover; effect, ensuring it scales proportionally on resizing in IE and Edge.

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