js控制图片缩放、水平和垂直方向居中对齐
来源:互联网 发布:淘宝分销和代销那个好 编辑:程序博客网 时间:2024/05/16 07:30
已测试兼容 IE6,IE7,IE8,火狐FF,谷歌chrome。
这里使用了jquery插件,如果你不使用jquery,稍微改造一下也很快。
网上查了些资料,用css控制兼容性不好,看去很揪心。于是找js代码,看了几种写法总是感觉差点什么,算了,还是自己写吧,于是有了下面这个简单的方法,能自动根据图片容器大小进行缩放、水平和垂直居中对齐,效果如下图:
<!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.comfunction 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>
转载:http://blog.csdn.net/xiangzi1113/article/details/8484839
- js控制图片缩放、水平和垂直方向居中对齐
- js控制图片缩放、水平和垂直方向居中对齐
- js控制图片缩放、水平和垂直方向居中对齐
- 图片水平垂直居中对齐
- css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中,能自适应浏览器缩放。
- JS控制图片按比例缩放并不超过一定宽度和高度(居中对齐)
- CSS 水平和垂直居中对齐
- css控制图片水平垂直居中
- JS等比例缩放图片并构建图片水平垂直居中解决方案
- 图片水平垂直居中
- 图片垂直水平居中
- 图片 垂直 水平 居中
- 图片水平垂直居中
- 图片水平垂直居中
- 对图片进行等比例缩放,并水平垂直居中
- 图片水平垂直居中对齐的四种做法
- HTML/CSS:图片居中(水平居中和垂直居中)
- css html将图片img标签 水平居中 垂直居中 和水平垂直居中
- 系统学习SSH_Day_002_Struts2——命名空间
- C++ 虚函数表解析
- Objective-C-使用NSMutableURLRequest发送POST请求,使用NSJSONSerialization解析JSON字符串
- js showModalDialog打开新的页面给原页面传值问题
- python 正则表达式
- js控制图片缩放、水平和垂直方向居中对齐
- Shell 脚本之字符串处理
- 把二元查找树变成双向链表
- python3.X与之前版本的不同(不断更新...)
- Java 字符串操作
- struts总结
- Ubuntu设置共享文件夹
- linux 一键安装lamp
- MTL4求解线性方程组