已测试兼容 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.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" οnlοad="setImgMiddle(this);"></li>
		<li><img src="http://img3.55bbs.com/photo/month_1103/1103271807a0039554cf5d95b9.thumb.jpg" οnlοad="setImgMiddle(this);"></li>
		<li><img src="http://www.xfhqw.com/uploadpic/20111126105419527.jpg" οnlοad="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>

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生