Qualità immagine animazione CSS3 su scala

Question

Ho immagini ridimensionate che fanno scattare la scala sulla dimensione originale delle immagini. La qualità dell'immagine è molto scarsa quando le immagini sono in uno stato ridotto. Qualche modo per migliorare questo?

(Qui è un jsfiddle: https://jsfiddle.net/w9o2chmn/7/)

$(document).ready(function() { 
 
    var zoomed = false; 
 
    var card = $("#card0"); 
 
    card.click(function() { 
 
     zoomFunction(); 
 
    }); 
 

 
    function zoomFunction() { 
 
     if (zoomed) { //card flipped so front is invisible and back is visible. 
 
      zoomed = false; 
 
      card.removeClass('zoom'); 
 
     } else { //card not flipped so front is visible and back is invisible 
 
      zoomed = true; 
 
      card.addClass('zoom'); 
 
     } 
 
    }; 
 
});

html {height: 100%;} 
 
.zoom {transform: scale(1.0);} 
 
img { 
 
    transform: scale(0.5); 
 
    transform-style: preserve-3d; 
 
    transition: 1s; 
 
}

<img id="card0" src="http://valtterilaine.bitbucket.org/png/vihainen.png">

Answer 1

• aggiungere backface-visibility: hiddenhttps://jsfiddle.net/w9o2chmn/12/

• uso zoom:50% invece di transform: scale(0.5): https://jsfiddle.net/w9o2chmn/11/

entrambe le correzioni funzionano solo in cromo!

Answer 2

Potrebbe essere meglio prendere l'immagine e ridimensionarla in qualsiasi applicazione di fotoritocco. Ho scoperto che se ho bisogno di ridimensionare l'immagine e non voglio una foto sgranata e pixelata per farlo in un'applicazione di terze parti. Se si desidera una transizione quando si fa clic o si passa sopra le immagini, è possibile fare l'immagine originale e creare una seconda copia dell'immagine nella dimensione desiderata. Quindi, puoi usare un'altra transizione in modo che quando la foto viene cliccata, la dimensione dell'immagine diventi normale, anche se si tratta di due immagini diverse.

Answer 3

Vorrei solo utilizzare una miniatura e impostare un onclick per caricare l'immagine più grande. Puoi formattare separatamente sia la miniatura che l'immagine normale in questo modo usando CSS se non vuoi farlo in jQuery. Ma ancora più semplice sarebbe salvare due versioni precedentemente modificate.