CSS等比例缩放.html-优快云博客

本文链接：https://blog.youkuaiyun.com/wsfeiyuan/article/details/84158698

本文介绍了一种实现图片垂直居中并对图片进行等比例缩放的方法。通过CSS样式设置，使得图片能够在不同尺寸下保持原有比例的同时实现居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2321" />
<meta id="robots" content="all" />
<meta name="Description" content="图片垂直居中 图片等比例缩放的方法" />
<meta name="Keywords" content="图片垂直居中" />
<meta id="author" content="土人老徐  http://K.css6.com" />
<meta id="Copyright" content="Copyright 2010-2011 K.css6.com. All Rights Reserved" />
<!--<link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />-->
<title>分享图片垂直居中，图片等比例缩放的方法 </title>
<style type="text/css" media="screen" rel="stylesheet">
.img_list ul li{ 
	float:left; 
	margin:10px; 
	//width:202px; 
	height:202px; 
	overflow:hidden; 
	display:inline;
	}
.img_list ul li { 
	vertical-align:middle; 
	float:left;  
	
	width:200px; 
	height:200px; 
	overflow:hidden; 
	display:table-cell; *display:block; 
	line-height:200px;  
	font-size:200px; *font-size:175px; 
	text-align:center;
	border:1px solid #f00; 
	font-family:Arial;
}

.img_list ul li img {
	max-width:200px; 
	width:expression(this.width > 200 ? "200px" : this.width); 
	max-height:200px; 
	height:expression(this.height > 200 ? "200px" : this.height); 
	}

</style>
</head>
<body>
	
<div class="img_list">
	<ul id="img_list">
		<li>
			<span>
				<img src="2.jpg" alt="示例图片" />
			</span>
		</li>
		<li align="absmiddle">
			<span>
				<img  src="1.jpg" alt="示例图片" />
			</span>
		</li>
	</ul>
</div>
<script type="text/javascript">

</script>
</body>
</html>