Question

我缩小了缩小图像的尺寸，缩小到图像的原始大小。当图像处于缩小状态时，图像质量非常差。有什么方法可以改善这个吗？

（这是一个jsfiddle：https://jsfiddle.net/w9o2chmn/7/）

＆＃13;

$(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');
        }
    };
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

添加if(checkString(nameInput.getText()).getValue().equals("")) { return; } https://jsfiddle.net/w9o2chmn/12/
使用backface-visibility: hidden代替zoom:50%：https://jsfiddle.net/w9o2chmn/11/

这两个修复程序仅适用于chrome！

Answer 2

尝试为img标记添加以下属性。他们可能会有所帮助，具体取决于图像。

img{
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering:   -o-crisp-edges;          /* Opera   */
    image-rendering: -webkit-optimize-contrast; /* Webkit  */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;   /* IE      */

    will-change: transform; // will consume additional memory
}

由于在GPU上完成工作，will-change:transform属性会使缩小后的图片在Chrome上显示得更好，并且通常可以提高变换动画的速度（平滑度）。但是，它会占用设备内存，如果有很多卡，特别是在移动设备上，可能会引起关注。

另一个更多＆＃34;保证＆＃34; 解决方案是仅在动画时使用效果scale转换，并在动画完成时删除scale属性并设置width到原始宽度的一半。

缩小的基本算法是，例如：

设置仅影响转化（transition:transform 1s;）
使用transform:scale(0.5)缩小图像。图像现在看起来很糟糕。
删除transition:transform 1s;属性以便转换是即时的，然后删除transform:scale(0.5)属性。图像现在看起来很好但是原始尺寸。
在删除scale属性的同时将图像的宽度设置为一半，以便宽度更改不可见。图像现在只有一半，看起来很好。

以下修改后的jsfiddle

Answer 3

我只想使用缩略图并设置onclick来加载更大的图像。如果您不想在jquery中使用CSS，可以使用CSS以这种方式单独格式化缩略图和常规图像。但更简单的是保存以前编辑过的两个版本。

Answer 4

最好在任何照片编辑应用程序中拍摄图像并调整其大小。我发现，如果我需要调整图像大小，并且不希望在第三方应用程序中使用粒状和像素化照片。如果您想要在单击或悬停图像时进行转换，则可以使用原始图像并以所需大小制作图像的第二个副本。然后，您可以使用另一个转换，因此当单击照片时，即使它是两个不同的图像，它也会在看起来正常时转换图像的大小。

CSS3动画图像质量规模

4 个答案: