作者：徐國煇_457 | 来源：互联网 | 2014-08-10 01:53
已测试兼容 IE6,IE7,IE8，火狐FF，谷歌chrome。
这里使用了jquery插件，如果你不使用jquery，稍微改造一下也很快。
网上查了些资料，用css控制兼容性不好，看去很揪心。于是找js代码，看了几种写法总是感觉差点什么，算了，还是自己写吧，于是有了下面这个简单的方法，能自动根据图片容器大小进行缩放、水平和垂直居中对齐，效果如下图：
-
>
-
<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>
京公网安备 11010802041100号