提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

图片预览自适应固定宽高div

图片 div 适应 固定 预览 宽高
2023-09-11 14:19:17 时间 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li{
			list-style: none;
			float: left;
			margin-left: 10px;
			width: 200px;
			height: 160px;
			border: 1px solid #ccc;
			text-align: center;
			line-height: 160px;
		}
		img{
			vertical-align:middle;
		}
	</style>
</head>
<body>
	<li>
		<img src="1.jpg">
	</li>
	<li>
		<img src="2.png">
	</li>
	
	<script type="text/javascript" src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
	$(function(){
		$.each($('img'),function(i,item){
			if($(this).outerWidth()>$(this).outerHeight()){
				$(this).css('width','100%');
			}else{
				$(this).css('height','100%');
			}
		});
	});
	</script>
</body>
</html>

相关文章