首页 > 代码库 > js控制图片缩放、水平和垂直方向居中对齐
js控制图片缩放、水平和垂直方向居中对齐
已測试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome。
这里使用了jquery插件,假设你不使用jquery,略微改造一下也非常快。
网上查了些资料,用css控制兼容性不好,看去非常揪心。于是找js代码,看了几种写法总是感觉差点什么,算了,还是自己写吧,于是有了以下这个简单的方法,能自己主动依据图片容器大小进行缩放、水平和垂直居中对齐,效果例如以下图:
[html] view plaincopy
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>demo图片自居中,宽度高度自己主动缩放</title>
- <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
- <script type="text/javascript">
- // i@huanglixiang.com
- function setImgMiddle(img) {
- var $img = $(img),
- $panel = $(img).parent();//图片容器
- var img_width = $img.width(),img_height = $img.height(),//图片宽高
- panel_width = $panel.width(), panel_height = $panel.height(); //图片容器宽高
- if(panel_width/panel_height < img_width/img_height){
- $img.width(panel_width);
- $img.css(‘margin-top‘, (panel_height - $img.height()) * 0.5);
- }else{
- $img.height(panel_height);
- $img.css(‘margin-left‘, (panel_width - $img.width()) * 0.5);
- }
- $img.fadeIn(100);
- }
- $(function(){
- // 这样的写法在ie6,7,8都不是非常正常,有时会随机丢失load事件
- $(‘#part2 img‘).load(function(){
- setImgMiddle(this);
- //console.log($(this).attr(‘src‘));
- })
- })
- </script>
- <style>
- .c{clear:both;}
- li {
- background-color: #F5F5F5;
- border: 1px solid #CCCCCC;
- margin: 5px;
- overflow: hidden;
- width: 240px;
- padding:1px 1px 1px 1px;
- height: 240px;
- float:left;
- }
- li img{display:none;}
- </style>
- </head>
- <body>
- <ul id="part1">
- <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" onload="setImgMiddle(this);"></li>
- <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" onload="setImgMiddle(this);"></li>
- <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg" onload="setImgMiddle(this);"></li>
- </ul>
- <div class="c"></div>
- <ul id="part2">
- <li><img src="http://xsrb.xsnet.cn/res/1/20090925/58311253832975937.jpg" ></li>
- <li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" ></li>
- <li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg"></li>
- </ul>
- </body>
- </html>
js控制图片缩放、水平和垂直方向居中对齐
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。