imagen - img stretch css
Escalado de imagen por CSS: ¿hay una alternativa de webkit para-moz-crisp-edges? (3)
Tengo una imagen que es 100x100 en píxeles. Quiero mostrar el doble de tamaño, así que 200x200 y quiero hacerlo por CSS y (explícitamente) no por el servidor.
Desde hace algunos años, las imágenes se suavizan mediante todos los navegadores en lugar de hacer una escala por píxel.
Mozilla permite especificar el algoritmo: image-rendering: -moz-crisp-edges; Lo mismo ocurre con IE: -ms-interpolation-mode: más cercano-vecino;
¿Alguna alternativa conocida de webkit?
Además de @Phrogz respuesta muy útil y después de leer esto: https://developer.mozilla.org/en-US/docs/CSS/image-rendering
Parece que el mejor CSS sería este:
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Chrome (and eventually Safari) */
image-rendering:crisp-edges; /* CSS3 Proposed */
-ms-interpolation-mode:bicubic; /* IE8+ */
WebKit ahora es compatible con la directiva CSS:
image-rendering:-webkit-optimize-contrast;
Puedes verlo trabajando en acción usando Chrome y la última imagen en esta página:
http://phrogz.net/tmp/canvas_image_zoom.html
Las reglas usadas en esa página son:
.pixelated {
image-rendering:optimizeSpeed; /* Legal fallback */
image-rendering:-moz-crisp-edges; /* Firefox */
image-rendering:-o-crisp-edges; /* Opera */
image-rendering:-webkit-optimize-contrast; /* Safari */
image-rendering:optimize-contrast; /* CSS3 Proposed */
image-rendering:crisp-edges; /* CSS4 Proposed */
image-rendering:pixelated; /* CSS4 Proposed */
-ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}
Desafortunadamente, parece que esta característica no está presente en WebKit. Vea este informe de error reciente: