百度图片搜索等比例缩放特效

作者：林炜贤来源：www.163css.com发表时间：(2011-10-13)

这可以说是一个有争议的特效，因为我在页面中不是很想采用。我们在制作网页的时候，经常要碰到图片列表，这个时候就会出现问题了，用户上传了大小不一的图片，如果我给图片写上了宽度和高度，那这图片就会变形了，这是用户不想看到的结果，反之，我不限制宽高，页面就会变得混乱。

我们曾经提出通过只限亮度不限高度的模式进行解决，在a标签写上宽度和高度，overflow:hidden;这样，图片就不会说很难看，页面上也不会乱，大家都觉得舒服，事情我是认为应该在后台给用户写上最合适的大小，通过PS处理后上传，这样的图片才是最合适的。

今天梁总极力推荐我用js实现等比例实现图片的效果，并提出百度的搜索图片也是这样，我看了下，还真是哦，以前都没注意，当我在百度搜索搜索图片时，出来了一系列的图片，而图片的大小是不一样的，但排得很整齐，我不清楚百度是不是这样做的，但我这个JS代码的确实现了放大缩小。

功能是实现了，让我有点惊奇的是百度的图片都是居底的：

一开始我还以为是用table布局，结果发现百度是通过定位技术实现的，这下我明白了，更让我觉得吃惊的是它的外层采用了16%这样的宽度比例，可以实现在任意分辨下的图片效果，真是聪明。

以下是我的制作的效果截图：

跟百度的相比如何？呵。。。

以下我提供源文件，欢迎有需要的朋友下载使用：

预览地址：http://www.163css.net/net163/cssjs/201110/bdpic/index.html

下载地址：JS实现百度图片搜索等比例缩放.zip