Html 变换缩放使图像模糊

我尝试对一些产品的悬停进行一些缩放效果。为此，我将图像的容器缩放到95%，并在悬停时将其缩放到100%：

但是，缩小后的图像会变得模糊。我尝试了关于这个主题的其他问题中给出的不同解决方案，比如：背面可见性、模糊（0）、translateZ。但似乎什么也改变不了什么

有没有办法让它变得更漂亮，或者是它能做到的最好

.container{
变换：比例（0.95）；
过渡：变换70毫秒缓进；
浮动：左；
}
.容器：悬停{
变换：比例（1）；
}

---

我相信你的问题在于像素插值：

调整图像大小时，必须调整像素。通过收缩，像素被平均化并减少。通过放大，像素被添加，像素之间的平均值填补了空白

请使用Photoshop或Gimpshop等图像编辑器调整图像大小，因为图像程序比web浏览器更适合于此

---

在这方面，当浏览器处理插值时，某些百分比比其他百分比更有效。我注意到它通常是每个季度的数字：25%、50%、75%的减少和125%、150%、175%的放大比其他数字（如95%或73%等）处理得更好。

将以下CSS添加到您的

img

元素中（不是安全的跨浏览器攻击）：

下面的片段：

.container{
变换：比例（.95）；
过渡：变换70毫秒缓进；
浮动：左；
}
.容器：悬停{
变换：比例（1）；
}
img{
图像渲染：-moz crisp Edge；/*Firefox*/
图像渲染：-o-crisp-edges；/*Opera*/
图像呈现：-webkit优化对比度；/*webkit（非标准命名）*/
图像渲染：清晰的边缘；
-ms插值模式：最近邻；/*IE（非标准属性）*/
}

是的，通常我会按照您的建议使用图像编辑器（或者只是图像魔法，在服务器上创建所需的大小）。但由于我希望它作为前端的缩放效果，这是不可能的。我是说。。我有一个肮脏的解决方案，可以工作的想法：创建两个图像，95%和100%，并使用95%的图像作为背景，背景大小：封面。然后在鼠标悬停时100%更改背景图像，并使用变换更改div的宽度和高度：宽度70ms，高度70ms。那可能行。。但是，如果要让客户加载2张图片，罗宾·威廉姆斯在她的书《非设计师设计书》中建议，如果你想建立视觉对比——无论是互动还是静态的，就把它放大。例如，将同一系列的字体相隔几点会造成眼睛疲劳，而较大的点变化会更好地支持内容流。我并不是建议你改变你的设计，但是也许考虑一下只有5%的缩放对用户有什么帮助。道具提到“-MS插值模式：最近邻居”，但我不认为这是我们可以信赖的CSS标准。正如CSS图像值文档第19期所述（），我们目前无法控制浏览器如何进行插值。虽然它在IE中做得更好了一点，但我看不到Crome和Firefox有什么不同，但无法判断这是好是坏：）我喜欢你的选择。与其放大图像，不如将其放大3像素，这样会给人同样的感觉。是的，我完全同意，但我肯定它不会比这部黑客作品好多少。我建议使用

translate

来避免img维度的改变。Firefox（虽然有点奇怪，是的，但它不是模糊的，但更像是一些最小像素异步）在我的浏览器上很好地接受了黑客攻击，Chrome则不是。多年来，这一直是一个普遍存在的问题，现在仍然存在。

img {
   image-rendering: -moz-crisp-edges; /* Firefox */
   image-rendering: -o-crisp-edges; /* Opera */
   image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
   image-rendering: crisp-edges;
   -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}