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

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

Utilizing object-fit: cover; in CSS to maintain consistent image height works seamlessly across browsers. However, in IE and Edge, a peculiar issue arises. Upon scaling the browser, the image resizes in width rather than zooming in height, distorting its appearance.

To resolve this issue, we employ a clever CSS solution that solves the problem:

position: absolute;<br>top: 50%;<br>left: 50%;<br>transform: translate(-50%, -50%);<br>height: 100%;<br>width: auto; // For vertical blocks<br>height: auto;<br>width: 100%; // For horizontal blocks<br>

This combination positions the image at the center using absolute positioning, eliminating the issue with object-fit: cover in IE and Edge. The image will now scale proportionally, maintaining the desired effect without distortion.

To illustrate the solution's effectiveness, consider the following demonstration:

Image Resizing Demonstration

This approach ensures consistent image behavior across all browsers, effectively addressing the object-fit: cover issue in IE and Edge.

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