css - 无法实现 -webkit-transform 以放大照片库中的图像

Question

我有一个关于像这样的照片画廊的概念性问题:

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

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

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

因此，首先将普通图像按比例缩小:

-webkit-transform:scale(0.8);

然后在悬停时放大:

-webkit-transform:scale(1.2);

我的问题:对于不支持这种缩小方法的浏览器，初始缩小应该如何工作？尝试在 IE 中打开该画廊以了解我的意思，它显示的图像未按比例缩小，这使得它们太大，从而破坏了布局。

我想要的:

• 在支持它的浏览器中的完整效果。重要的是缩放版本保持质量。
• 对于不支持它的浏览器没有任何影响，但原始尺寸是固定的，因此不会破坏布局
• 它应该适用于两种图像方向，并且图像的宽度和高度也可能会有所不同

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

Answer 1

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

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

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

** 我不知道百分比是否适用于文字高度/宽度定义。但您始终可以计算出您需要的比率并将其插入。