Yocker
  1. Yocker
  3. Ridimensionamento dell’immagine tramite CSS: esiste un’alternativa al webkit per -moz-crisp-edges?
Intereting Posts
Rimozione di spazi vuoti da stringhe in Java Ottenere tempo video YouTube corrente Cosa significano le virgole e gli spazi in più classi nei CSS? Perché una variabile “locale” non definitiva non può essere usata all’interno di una class interna, e invece un campo non finale della class che lo contiene può? SQL Server: conversione ((int) anno, (int) mese, (int) giorno) a Datetime Quale è più veloce – INSTR o LIKE? Impostazione della stringa di connessione in ASP.NET a SQL SERVER Come si usa la riflessione per richiamare un metodo privato? Quando dovrei scegliere l’ereditarietà su un’interfaccia durante la progettazione di librerie di classi C #? Stampa l’icona di jLabel in una stampante utilizzando un pulsante La funzione asincrona non restituisce il valore, ma console.log (): come fare? Ordinamento dei parametri per utilizzare il curry ASP.NET Core MVC: come ottenere un JSON raw vincolato a una stringa senza un tipo? Come rimuovere gli spazi bianchi iniziali e finali in un campo MySQL? Modifica la raccolta del percorso di MVC6 dopo l’avvio

Ridimensionamento dell’immagine tramite CSS: esiste un’alternativa al webkit per -moz-crisp-edges?

Ho un’immagine che è 100×100 in pixel. Voglio mostrarlo il doppio delle dimensioni, quindi 200×200 e voglio farlo da CSS e (esplicitamente) non dal server.

Da alcuni anni, le immagini diventano anti-alias da tutti i browser invece di fare una scala per pixel.

Mozilla consente di specificare l’algoritmo: image-rendering: -moz-crisp-edges; Così fa IE: -ms-interpolation-mode: neighbor-nearest;

Qualche alternativa al webkit conosciuta?

    Sfortunatamente, sembra che questa funzione sia assente in WebKit. Vedi questo recente bug report:

    https://bugs.webkit.org/show_bug.cgi?id=40881

    WebKit ora supporta la direttiva CSS: 

    image-rendering:-webkit-optimize-contrast;

    Puoi vederlo in azione utilizzando Chrome e l’ultima immagine in questa pagina:
    http://phrogz.net/tmp/canvas_image_zoom.html

    Le regole utilizzate in quella pagina sono: 

     .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+ */ }

    Oltre a @Phrogz risposta molto utile e dopo aver letto questo: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

    Sembra che il miglior CSS sarebbe questo: 

     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+ */