table方法实现图片自适应及脚本方法

     图片自适应的布局是很多详情页面的惯用的布局方法，当然各路大神们有自己的方法，确实是让人膜拜，今天才是上班的第一周就遇到了这样的问题，也是让我折腾了好一会，最后自己腾出时间研究了两种方法。那么就来分享一下。

    当然！一种是比较通用的脚本方法，去获取图片的宽和高，并且得到比值，另外的话设置最大的可取的长和宽，然后去判断真实的图片是长条形还是扁平形，然后适应外框。这种代码网上有很多，就不多详细的解释了，另外的话，还有一种用table表的方法去让图片自适应，感觉效果很神奇，所以自己摸索了一番，废话不多说，上代码！！！！
    那么我们先来一睹为快要实现的布局样式！！！
      
    像这样的图片自适应样式，有着图片不变形，且排列整齐的特点，很多网站的图片预览页面就是这样的布局，就像之前说得。写一个脚本去判断图片的大小和位置是一种最直接的方法，除此之外我们就要来讨论下table的方法！！
    首先我们做一个简单的table表格里面插图片，布局如下：
并且加上简单的样式：

    从右边的预览结果，我们发现，在不设宽度的情况下，表格自动实现了响应，自动占满一整行，并且每个元素的宽度按里面图片的宽度比值来定，图片位置也会自动居中，和我们需要的效果已经十分接近；
    接着我们给它外包一个大的div作居中处理，看一下效果。。。。

结果8个元素的总宽度被限制在了一定范围内，每一个元素按照自身图片宽度的比值来分配宽度，并且做到了居中效果，最后只要把默认border去掉，并且在td元素上加一个border:1px，table标签上改成如下图的border样式：

就成功达到我们的预想效果了，最后只需要稍加样式的改动就ok了！！

        感觉用此法作这种布局如此高效！！！！

        除了直接插入图片的方法之外呢，我们还可以用背景图的方法；简单代码：
        
     我们用背景图去完成图片的位置定位，这里可能要注意下，background的position属性比较特别，假如我们讲上图中第二个元素的posiction值改为50% 100% 则会有不一样的效果：

背景所移动的高度从中间到了下顶格，说明position相对的移动100%所对应的距离只是（div高度-图片的高度）,当然这是在图片高度小于div高度的情况了。
     另外还有一点就是最好还是用固定的宽来做这种布局，如果用百分比会出些错误，有兴趣的朋友们可以自己试试，在固定的宽度情况下，假如外层的div最大的宽度是1400px,那么每一个子元素的最大宽只能是200px,若设置的宽度大于200侧只会显示200，若小于200则按设置的尺寸来。这些我就不一一上图了；

         那么我们成功的达到了我们的效果，我们在来做一些题外的实验；

       

    实验一：我们讲样式做一点点小小的改动，我们将td里的图片高度改成100%，宽度不做要求那么效果如下：

我们得到了一种所有图片按比例宽度，但又都铺满td的样式效果，我们没有对图片的宽度设限，所以总宽度被挤出去了，那么最外层的div设置宽度将没有意义！！！

实验二：我们再将图片的高度和宽度都设置成100%；

结果我们得到了按比例分配 ，总宽度又限制在一定范围并且图片铺满td的不具效果，当然图片发生了变形！！！

实验三：最后我们再把td设置一个宽度，让每一个td都有一样的宽度，这里我们定位12.5%，结果发现！！！！

妈妈呀 ！！好像这才是最符合我们今天任务的布局呀！！！呵呵！！

          最后总结下，不试不知道一试吓一跳，这个table还真的顶用！！虽然说现在的table好像用的真少，但是这样高效的布局我觉得还是可以坚持使用下去！！！喜欢的朋友们点歌赞把！！虽然可能只有我自己看到 哈哈哈！！！

      最后的最后，我看到了张鑫旭大神的display;table我觉得更加神奇，哎，，大神毕竟是大神！！！大家要多多参考呀！！

      

http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html#zhangxinxu