Question

例如：

有一张1000x1000的图片
我为其添加了样式width:10px
我添加了将其缩放100倍的变换样式：transform: scale(100, 100)
最后图像尺寸变为1000px。

问题：

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

有没有办法控制质量？我尝试将scale应用于父元素，子元素本身，但无论我做什么 - 图像都是真实的大小

JSFiddle https://jsfiddle.net/dpfmp4hz/

为什么我需要这个：

我需要将4000x4000图像的缩放动画运行到600x600，缩小会导致显着滞后。有趣的是，从600x600到4000x4000的缩放非常顺利，因为我只在转换完成后才应用4000x4000尺寸。

我真的不想使用画布......

感谢您的帮助！

Answer 1

我创建了一个从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);
}

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

您的问题还有什么我没看到的吗？您是否正在使用可能难以重新绘制此类图像过渡的设备/计算机？

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

变换缩放后控制图像质量

1 个答案: