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

Question

例如：

• 有一个1000x1000的图像
• 我给它添加了样式width:10px
• 我添加了转换样式，将其缩放为100倍：transform: scale(100, 100)。
• 最后，图像大小变成1000 And。

问题是：

• 我预计图像会模糊，因为它是100倍的比例从10 be。但事实并非如此，图像是完全分辨率的。

有控制质量的方法吗?我试着将scale应用到父元素，应用到子元素本身，但是不管我做了什么，图像都是按实际大小呈现的。

JSFiddle https://jsfiddle.net/dpfmp4hz/

为什么我需要这个：

• 我需要运行缩放动画从4000x4000图像到600x600，并缩小造成明显的滞后。有趣的是，从600x600扩展到4000x4000是非常平滑的，因为我只在转换完成之后才应用4000x4000维。

我真的不想用帆布..。

谢谢你的帮助！

Answer 1

我创建了一个从4000 to减少到600 to的小提琴，我不认为有任何滞后，正如您使用下面的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);
}

https://jsfiddle.net/p5yL6fwo/1/

你的问题还有什么是我看不到的吗？您是否正在使用可能难以重新绘制这样的图像转换的设备/计算机？

这是相同的，但正在转变，同样没有滞后：https://jsfiddle.net/he12r8g5/