CSS3缩放变换/保持图像质量

Question

假设一张2000x2000像素的图片最初以10倍小的尺寸显示，即200x200像素。如果通过CSS3的scale(10)方法进行转换，它肯定可以正常工作，但即使图像最初可以以这样的大小显示，它看起来也会非常模糊。是否有一种方法可以通过这种转换恢复初始图像尺寸？也就是说，通过转换显示“原始”大小的图像。

- Ben

Answer 1

您可以尝试反过来进行缩放。在普通状态下，您可以使用 transform: scale(0.1) 将图像缩小为 200x200，当您想要放大时，只需将其设置为 scale(1)。这样就不会出现任何模糊。请查看此 jsFiddle示例。

- Timo D

---

啊！如果可能的话，那就是要做的事情（我不会在这里解释所有原因，但是找到解决方案我会200%高兴）。 - Ben

好的，你能提供一张图片让我亲自测试一下吗？ - Timo D

Answer 2

将图像放入容器中，并缩放容器。在这种情况下不需要使用变换。

div {
    width: 200px;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
}
div:hover {
    width: 2000px;
    height: 2000px;
}

<div><img src="http://www.solarviews.com/raw/earth/bluemarblewest.jpg" width="2048" height="2048"></div>

重复使用 Timo D 的图片...懒得再找其他的 :-)

- vals

---

你是说为了那个事情就得用三个吗？我觉得不值得……除非你的需求里有我不知道的东西。使用纯HTML/CSS应该可以获得一个好的解决方案。 - vals

不仅如此。由于我正在使用css3Drenderer，因此与相机有关：camera.z在图像上“缩放”（在CSS中等效于图像的transform:scale(x)）。 - Ben