Качество изображения анимации CSS3 по шкале

У меня есть уменьшенные изображения, которые накладывают масштаб на исходный размер изображения. Качество изображения очень плохое, когда изображения находятся в уменьшенном состоянии. Любой способ улучшить это?

(Вот 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">

Ответы

Ответ 2

Я бы просто использовал миниатюру и установил onclick для загрузки большего изображения. Вы можете отформатировать как миниатюру, так и обычное изображение отдельно, используя CSS, если вы не хотите делать это в jquery. Но еще проще было бы сохранить две ранее измененные версии.

Ответ 3

Лучше взять изображение и изменить его размер в любом приложении для редактирования фотографий. Я обнаружил, что если мне нужно изменить размер изображения и не хотите, чтобы зернистая и пиксельная фотография делала это в стороннем приложении. Если вам нужен переход при щелчке или наведении изображений, вы можете получить исходное изображение и сделать вторую копию изображения в нужном размере. Затем вы можете использовать другой переход, поэтому при щелчке по фотографии он преобразует размер изображения, выглядя нормальным, даже если это два разных изображения.