700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 图片大小自适应垂直居中的方法

图片大小自适应垂直居中的方法

时间:2021-10-08 22:46:10

相关推荐

图片大小自适应垂直居中的方法

偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式:

Javascript篇

用JS的方式处理解决图片,思路就是预加载图片,然后取宽和高,计算位置,设置margin值,达到目的

上面是比较普遍的方式,但就是需要加载完整张图片才能计算和显示出来,要是图片很大,就等死人了

改良方法,图片宽和高,并不需要加载完毕才能获取得到,发请图片请求后,只要服务器响应了,开始下载图片时候,宽和高就会返回,这个时候就能获取得到了

上面方式是利用计时器不断取图片的宽度,发现有值就可以停止取了,测试发现,在首次加载图片情况下,计时器是比onload触发快很多倍

CSS篇

利用纯CSS也能实现图片的垂直、水平居中

一、传统方式

主要是利用表格的居中方式,带*的是为了兼容IE6浏览器,如果不考虑,可以去掉

二、CSS3方式

在移动端可以使用这种方式

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。