Home > Article > Web Front-end > 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:
<code class="css">position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);</code>
<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!