实施 -webkit-transform 来放大照片库中的图像时遇到问题
我有一个关于照片库的概念性问题，如下所示：
http://www.nikesh.me/ demo/image-hover.html
如果您在支持 CSS Transitions 的浏览器（例如 Chrome）中打开它，它将平滑地缩放悬停图像，同时缩放版本仍保持高质量。
这是通过将未缩放图像显示为比实际尺寸稍小的版本来实现的，本质上缩放以真实尺寸显示它们。
因此，普通图像首先缩小：
-webkit-transform:scale(0.8);
然后悬停时放大：
-webkit-transform:scale(1.2);
我的问题： 对于不支持这种缩小方法的浏览器，初始缩小应该如何工作？尝试在 IE 中打开该画廊，看看我的意思，它显示的图像未按比例缩小，这使得它们太大，从而破坏了布局。
我想要的：
- 支持它的浏览器中的完整效果。重要的是缩放版本保持质量。
- 对于不支持它的浏览器没有任何影响，但原始尺寸固定，因此不会破坏布局
- 它应该适用于两种图像方向，并且图像宽度和高度也可能有变化
有人吗？最好是一个不需要浏览器嗅探或 JavaScript 的优雅解决方案，但欢迎所有答案。
I have a conceptual question about photo galleries like this:
http://www.nikesh.me/demo/image-hover.html
If you open this in a browser that supports CSS Transitions (for example Chrome), it will smoothly scale the hovered image whilst the zoomed version remains of a high quality.
This is accomplished by showing the non-zoomed images into a slightly smaller version than they really are, in essence the zoom shows them in their true dimensions.
So, normal images are first scaled down:
-webkit-transform:scale(0.8);
And then upon hover scaled up:
-webkit-transform:scale(1.2);
My question: How is the initial scaling down supposed to work for browsers that do not support this method of scaling down? Try opening that gallery in IE to see what I mean, it shows the images not scaled down, which makes them too large and thereby they break the layout.
What I want:
- The full effect in browsers that support it. Important is that the zoomed version remains quality.
- No effect at all for browsers that do not support it, yet a solid original dimension so that no layout is broken
- It should work for both image orientations and there may be variety in image widths and heights too
Anyone? Preferably an elegant solution that does not need browser sniffing or javascript, but all answers are welcome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果你希望它在不使用 javascript 的情况下工作，那么你唯一的方法似乎就是放弃使用 css 进行初始缩小。您将需要以调整标记中图像的宽度和高度的“过时”方式来执行此操作。
如果用户代理不是最新的，这将允许您仍然保持布局完好无损。
** 我不知道百分比是否适用于字面高度/宽度定义。但您始终可以计算出所需的比率并将其插入。
If you are wanting it to work without the use of javascript then it seems the only method you have is to forgo the initial scale down with css. You will want to do this in the "antiquated" way of adjusting the width and height of the image in the markup.
This would allow you to still keep your layout in tact if the user agent is not up to date.
** I don't know if the percentage works in the literal height/width definition. But you can always figure out the ratio you need and plug it in.