"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Fit de objeto: la cubierta falla en IE y Edge, ¿cómo solucionar?

Fit de objeto: la cubierta falla en IE y Edge, ¿cómo solucionar?

Publicado el 2025-01-31
Navegar:655

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

Object-Fit: la portada falla en IE y Edge, ¿cómo solucionar?

utilizando objeto-fit: cover; en CSS para mantener la altura de imagen consistente funciona perfectamente entre los navegadores. Sin embargo, en IE y Edge, surge un problema peculiar. Al escalar el navegador, la imagen cambia de tamaño en ancho en lugar de acercarse a la altura, distorsionando su apariencia.

para resolver este problema, empleamos una solución CSS inteligente que resuelve el problema:

 posición: absoluto; 
superior: 50%;
izquierda: 50%;
transformar: traduce (-50%, -50%);
altura: 100%;
ancho: auto; // para bloques verticales
altura: auto;
ancho: 100%; // para bloques horizontales
pre>

Esta combinación posiciona la imagen en el centro utilizando el posicionamiento absoluto, eliminando el problema con el ajuste de objeto: la cubierta en IE y el borde. La imagen ahora escala proporcionalmente, manteniendo el efecto deseado sin distorsión.

para ilustrar la efectividad de la solución, considere la siguiente demostración:

Image RESTIGACIÓN DOSTACIÓN

Este enfoque garantiza un comportamiento de imagen consistente en todos los navegadores, abordando efectivamente el problema de los objetos: el problema de la cubierta en IE y Edge.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3