Javascript 控制变换缩放后的图像质量

例如：

• 有一个1000x1000图像
• 我给它添加了样式

  宽度：10px

• 我添加了将其缩放100倍的变换样式：

  transform:scale（100100）

• 最后图像大小变成1000px

问题是：

• 我希望图像会模糊，因为它是从10px缩放到100x的。但事实并非如此，图像是全分辨率的

有什么方法可以控制质量吗？我尝试将

缩放应用到父元素，应用到子元素本身，但无论我做什么，图像都以真实大小渲染

JSFIDLE

为什么我需要这个：


我需要运行从4000x4000图像到600x600的缩放动画，缩放会导致明显的延迟。有趣的是，从600x600到4000x4000的缩放非常平滑，因为我仅在转换完成后应用4000x4000尺寸

我真的不想用画布

谢谢你的帮助
 我已经创建了一个从4000px降低到600px的小提琴，我没有看到任何延迟，正如您使用以下css描述的那样：

img {
  width: 4000px;
  height: auto;
}
.parent {
  transform-origin: 0 0;
  transition: all 1s ease-in-out;
  display: inline-block;
}
.parent:hover {
  transform: scale(.15, .15);
}


你的问题还有什么我没有看到的吗？您使用的设备/计算机可能难以重新绘制这样的图像过渡吗

这是相同的，但向上转换，同样没有延迟：
我能想象的唯一方法是从
中抓取图像像素，然后取出你不想要的像素。谢谢你的帮助，你的最后一把小提琴非常有趣，如果我删除“display:inline block”，它会再次开始滞后，参见示例我还忘了提到Chrome中发生的问题，你也用Chrome测试吗？Safari&FF的表现有点不同。我在Chrome、Safari和Firefox上进行了检查，没有任何延迟。如果内联块解决了这个问题，那么我想上面的CSS是正确的：）