例如:
- 有一张 1000x1000 的图片
- 我给它添加样式
width:10px - 我添加了将其缩放 100 倍的变换样式:
transform: scale(100, 100) - 最后图片大小变成1000px。
问题:
- 我预计图像会变得模糊，因为它从 10 像素缩放到 100 倍。但事实并非如此，图像是全分辨率的。
有什么方法可以控制质量吗？我尝试将 scale 应用到父元素、子元素本身，但无论我做什么 - 图像都会呈现实际大小。
JSFiddle https://jsfiddle.net/dpfmp4hz/
为什么我需要这个:
- 我需要运行从 4000x4000 图像到 600x600 的缩放动画，并且缩小会导致严重延迟。有趣的是，从 600x600 缩放到 4000x4000 非常平滑，因为我仅在转换完成后才应用 4000x4000 尺寸。
我真的不想用canvas...
感谢您的帮助!
最佳答案
我创建了一个从 4000px 减少到 600px 的 fiddle ，我没有看到你描述的使用以下 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/
关于javascript - 变换缩放后控制图像质量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47655262/