你的位置:首页 > 网页设计

[网页设计]【居中系列】大小不固定的图片在固定容器中的水平垂直居中



一般在做产品页面的时候,如果产品图片宽高定死的话,有的图片就会变形,如果把宽给个最大宽,高自适应的话有的图又会由于是个长方形高超出了容器,这样就不得不截掉一部分图。于是就想着,首先不管图片是个什么比例,不管它是宽远大于高或者高远大于宽,统一设置最大的宽高值,不让它超出容器,并且这样处理图片不会变形。接下来想怎么处理图片大小不定,在固定容器中水平垂直居中的问题。

参考链接:

张鑫旭:大小不固定的图片和多行文字的垂直水平居中

w3cplus大漠:css制作图片水平垂直居中

对比了一下他们的方法,发现张鑫旭的方法① 透明gif图片+背景定位,我们做产品页面都是用的img而不是背景,有点担心后台会不好弄,所以一般不想用这种方法;方法② display:table-cell和文字大小控制居中,没有链接,如果给图片加了链接在ie7里面错位了,方法③ display:inline-block和文字大小控制居中,那个效果并不是自己想要的,方法④ 使用空白图片实现垂直对齐,这方法感觉不如w3cplus大漠的简便。

经过对比综合考虑,总结出以下方法。

 

1.推荐使用方法(利用font-size:0与空白标签) 

 

 

2.建议掌握技巧。利用display:table-cell与display:inline 

也许这种方法较第一种更为繁琐,还得写兼容ie的hack,但是我觉得用display-table和vertical-middle在现代浏览器中实现图片垂直居中是很值得学习的。如果以后不需要做低端浏览器的兼容了,这种方法应该会更适合我。

 3.jquery方法。

将图片转换为其父元素的背景图片,并且在其父元素中居中显示背景图片,然后在将其自身的透明度设置为“0”, 这样也能达到图片居中的效果。

这种方法主要是学习这种思路。但是我自己测试后发现并不适用于图片很大的情况,那样就算我把img设置了max-width,max-height也没用。变成背景后它依然会显示原图大小。所以这里就不贴出来了。有兴趣的可以自己去看看上面大漠w3cplus的链接。