Question

假设一个2000x2000px的像素图像最初以10倍的尺寸显示，即200x200px

如果通过这里的CSS3 scale(10)方法进行转换，它肯定会正常工作，即使图像最初可以显示在这么大的尺寸上，它看起来也会非常模糊

有没有办法通过这种转换来恢复初始图像尺寸？意思是通过变换显示“原始”尺寸图像

Answer 1

您可以尝试以相反的方式进行缩放。

因此，在常规状态下，您使用transform: scale(0.1)将图像缩小到200x200，当您想要放大时，只需将其设置为scale(1)即可。这样你就不应该经历任何模糊。

结帐j sFiddle。

Answer 2

将图像放入容器中，然后缩放容器。在这种情况下无需转换

＆＃13;

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

＆＃13;

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

＆＃13;

重复使用Timo D中的图像...太懒了以寻找另一个： - ）

css3比例变换/保持图像质量

2 个答案: