图片在div中上下居中显示并自适应宽高

对于图片如和在div中上下居中的问题困扰了偶很多年,今天终于狠下心来把它彻底搞定(实际上是因为Mackes不是专业前端,所以很少用到,经常忘记,网上有没个我喜欢的)。

在网上你会看到有用三层div通过浮动居中的,也有直接写了个dislay:table-cell;的。要么太复杂,要么没有全部适应。

下面我来讲解一下我的方法。

大家知道,在table中 只要在td上设置了 vertical-align:middle;就可以做到这一点。可是div中不行。这到底是为什么呢?

也许大家都知道table被div淘汰的原因,是因为table自带的一些样式太庞大了,页面加载的同时会同步加载样式,导致table布局的页面加载很慢。而div则只只带了一个很简单样式 display:block;。其他的样式是可以通过css样式异步加载的。

OK,因为在table中实现了我们想要的效果,那么我们可以先写个简单的table来看看这个时候table用了哪些样式使得图片可以上下居中。

然后,我用了谷歌浏览器来查看“审查元素”,有些说我用firebug可以不?答案是NO。因为谷歌浏览器的“审查元素”功能会把元素的默认样式也说明的很清楚,但是你用firebug就只能看到自己定义的,而不能看到元素的默认样式。

通过查看发现<tr>中有一个display:table-row;样式,之前我一直以为它的默认样式是display:table-column;,那会不会就是这个table-row;起的作用呢?因为网上有人用table-cell;。Just try it !

<div id="tr" style="display:table-row;height:100px;">

<div id="td" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

</div>

Ok !That all ! 测试成功了,哈哈! 原来就这么简单。

在网上你会看到 只用了talbe-cell,这个样式是table中最小单位的样式,你可以理解成 table中的td。可以在“审查元素”时发现<td>中默认就有这个样式,而<tr>中有 table-row 这个样式。table-row 就像是table中的tr一样控制了整行样式,可以联想到:行、行高;对就是跟高度有关。

所以说:以上的两个div 就像当于是table中的tr和td(看示例代码中的ID值)。但是没有用到table的庞大样式,而且我们所用的是div,所以不会对加载速度产生影响。

如果你想同时左右居中,那就用text-align:center;就可以了(这个其实不需要说明大家都知道)。

同样的像table一样,如果是多个这样的div就只要这样写:

<div id="tr" style="display:table-row; height:100px;">

<div id="td" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

<div id="td1" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

<div id="td2" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

<div id="td3" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div>

。。。。。。。。

</div>

很明白吧!好了写完。

当然,千万别在真实环境下这么大长串的写, 我只是说明一下。编辑器里不好写 T_T 请体谅一下吧......

注意:height,如果没有高度就没有上下居中这一说法了。

下面是自适应宽高算法:

假设容器元素的宽高都是100px;

图片的宽是imgW,高度是imgH;

代码如下:

var imgW=$('img').width();

var imgH=$('img').height();

var imgAttr=imgW>imgH?'width':'height';(三元算法简介明了)

$('img').attr(imgAttr,100);

OK,四行搞定(也可以是两行,你懂的),记得这是jquery框架下的,所以小伙伴们不忘记引用哦 ^_^ ! ! !

 

转走请说明出处:fanslp.com 小博主就这点请求了,您就从了吧!写这么多不容易啊我。

 

 

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注