星空网 > 软件开发 > 网页设计

【居中系列】大小不固定的图片在固定容器中的水平垂直居中


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

参考链接:

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

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的链接。




原标题:【居中系列】大小不固定的图片在固定容器中的水平垂直居中

关键词:图片

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

分享10款出口跨境电商视频营销工具!:https://www.ikjzd.com/articles/94225
亚马逊新品推广的思路分享!:https://www.ikjzd.com/articles/94229
科普!跨境电商周边服务必备基本常识!:https://www.ikjzd.com/articles/94230
亚马逊这些广告投放规则你清楚吗?:https://www.ikjzd.com/articles/94237
中方将对美国2493个进口药品加征25%关税!:https://www.ikjzd.com/articles/94238
跨境电商一定要了解的出口退税知识!:https://www.ikjzd.com/articles/94239
恐怖游轮2002 恐怖游轮2022:https://www.vstour.cn/a/365178.html
时尚电商平台Meesho拟融资3亿美元!:https://www.kjdsnews.com/a/1836524.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流