无法实现-webkit-transform来扩展照片库中的图像

Question

我对这样的照片画廊有一个概念性的问题：

http://www.nikesh.me/demo/image-hover.html

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

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

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

-webkit-transform:scale(0.8);

然后悬停放大：

-webkit-transform:scale(1.2);

我的问题：初始缩小是如何适用于不支持这种缩小方法的浏览器？尝试在IE中打开该库以查看我的意思，它显示的图像没有按比例缩小，这使得它们太大，从而打破了布局。

我想要的是什么：

• 支持它的浏览器的完整效果。重要的是缩放版本仍然保持质量。
• 对于不支持它的浏览器没有任何影响，但是没有任何影响，因此没有布局被打破
• 它应该适用于两个图像方向，图像宽度和高度也可能有多种

任何？优选的解决方案不需要浏览器嗅探或javascript，但欢迎所有答案。

Answer 1

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

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

如果用户代理不是最新的，这将允许您仍然保持布局。

**我不知道百分比是否适用于文字高度/宽度定义。但是你总能找出你需要的比例并插上它。