原

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

当然!一种是比较通用的脚本方法,去获取图片的宽和高,并且得到比值,另外的话设置最大的可取的长和宽,然后去判断真实的图片是长条形还是扁平形,然后适应外框。这种代码网上有很多,就不多详细的解释了,另外的话,还有一种用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