场景:让不规整的缩略图在容器中居中显示(针对特别长或特别宽的图)

如下图场景:

代码及样式:

<html>
<head>
	<title>百搭屋</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<style>
		
		.table {
		  display: table;
		  table-layout: fixed;
		  width: 500px;height: 500px;border: 1px solid red;
		  background:#F0F0F0;
		}
		.table-cell {
		  display: table-cell;
		  text-align: center;
		  vertical-align: middle;
		}
	</style>
</head>

<body>
	<div style="" class="table">
		<div class="table-cell">
			<img style="max-width:500px;max-height:500px;" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=1111114400,1524974545&fm=85&s=BF80E901FF975FC60A8DD4D60300E0F0">
		</div>	  
	</div>
 </body>
</html>

效果图如下:

 

 

 

Logo

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

更多推荐