Css 无法实现-webkit转换以放大照片库中的图像

我有一个关于照片库的概念性问题，如下所示：

如果您在支持CSS转换的浏览器（例如Chrome）中打开此选项，它将平滑缩放悬停的图像，同时缩放的版本仍保持高质量

这是通过将未缩放的图像显示为比实际尺寸稍小的版本来实现的，本质上，缩放以真实尺寸显示它们

因此，首先缩小普通图像的比例：

-webkit-transform:scale(0.8);

然后按比例放大悬停：

-webkit-transform:scale(1.2);

我的问题：对于不支持这种缩小方法的浏览器，最初的缩小应该如何工作？试着在IE中打开那个图库看看我的意思，它显示的图像没有缩小，这使得它们太大，从而破坏了布局

我想要什么：

• 在支持它的浏览器中的全部效果。重要的是，缩放后的版本仍保持质量
• 对于不支持它的浏览器没有任何影响，但是有一个坚实的原始维度，这样就不会破坏布局
• 它应该适用于两种图像方向，并且图像的宽度和高度也可能有所不同

---

有人吗？最好是一个优雅的解决方案，不需要浏览器嗅探或javascript，但所有答案都是受欢迎的。

如果您希望它在不使用javascript的情况下工作，那么您唯一的方法似乎是放弃使用css进行初始缩放。您将希望通过“过时”的方式来调整标记中图像的宽度和高度

<img src="yourImageSrc" width="80%" height="80%">

如果用户代理不是最新的，这将允许您保持布局的灵活性

---

**我不知道百分比在文字高度/宽度定义中是否有效。但你总是可以计算出你需要的比率，然后把它插进去

IE支持一种缩放方式：

zoom

。我取得了一些进展，但仍然存在一些问题。事实上，仅仅一个百分比并不能减少它，我必须计算实际图像和缩小图像之间的比率，并将其用作文字宽度和高度。这很有效。还有两个问题：1）在Chrome中（9）放大的图像质量较差。这不是我期望的，因为我故意加载比我显示的图像大的图像。2） FF3.6可以正确地将图像缩放到高质量，但没有动画效果。这不是什么大问题，但很奇怪，因为我使用的是FF 3.6，从3.5开始就应该支持它。无论如何，我会尽快给你奖金。我认为你的答案是正确的，虽然我可能会放弃这个功能，但它在任何浏览器中都无法正常工作（动画+高质量缩放）。