<h2>Object-Fit: Cover Fails in IE and Edge, How to Fix?</h2>

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:

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

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.