¿ La imagen de fondo no queda bien al redimensionar en Explorer ?

[davidj]

Hola a todos,

Tengo un botón (es un circulo) realizados mediante la propiedad background.

Tengo el siguiente código:

.icono a {
display: block;
width: 28px;
height: 28px;
background-image: url('images/circulo.png');
background-size: 28px 28px;
}

En Chrome, firefox, safari aparece nítido, sin embargo en Explorer/Edge la calidad del botón es mala. El círculo aparece con los bordes poco definidos.

La imagen original del botón es de 220x200px y lo redimensiono a 28x28 mediante background-size.

¿Cómo lo puedo solucionar?

Gracias.

[g3kdigital]

Sí la imagen tiene bordes dentados debe ser por la forma en la que fue exportado el .png, ahora hay varias maneras de solucionar algo así en css, por ejemplo coges el contenedor de la imagen y le declaras un overflow:hidden, para que no se vea nada que rebase el tamaño definido para el elemento y luego lo redondeas usando: border-radius:50%;, también podría tener que ver con el render de la iamgen: https://developer.mozilla.org/en-US/...mage-rendering.

Pero la verdad, es que me pregunto ¿Por que lo quieres hacer como imagen, sí perfectamente lo puedes hacer solo con CSS?

[isaac26lopez]

Buenas! Llego una semana tarde, pero bueno, si alguien lo lee puedo "abrirle los ojos".

Te recomiendo que veas estas comparaciones en cuanto reglas y elementos que los navegadores cumplen, o dejan de cumplir, en función de html5, css3 y demás:

https://html5test.com/compare/browser/mybrowser/ie-11/ie-Edge%2013/opera-31/safari-9.0.html

Un saludo

[davidj]

De momento, lo que he hecho es hacer un redimensionamiento en relación a 2, es decir, redimensionar a la mitad o la mitad de la mitad y parece que funciona.

[davidj]

Lo que no entiendo es por qué pasa esto en Internet explorer.

Por ejemplo, si deseo mostrar una imagen de (450x450px) y la hago más pequeña mediante CSS (width: 100px;) en Internet Explorer se ve la imagen poco definida, como si tuviera poca resolución..

¿ Sabéis por qué pasa esto en Internet explorer ?

Gracias.