css 圖片不固定大小居中顯示

時間 2019-11-12

標籤 css 圖片固定大小居中顯示欄目 CSS 简体版

原文原文鏈接

參考新浪微博css

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />
	<title></title>
    <meta name="format-detection" content="telephone=no">
    <!-- <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/> -->
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		ul{
			margin: 0 0 -0.25rem;
			padding: 5px;
			font-size: 0;
		}
		li{
			list-style: none;
			width: 33.33%;
			padding: 0 .3125rem .3125rem 0;
			display: inline-block;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			margin: 0;
		}
		li>div{
			position: relative;
			padding-bottom: 100%;
		}
		li>div>img{
			object-fit: cover;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 50%;
			position: absolute;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<ul>
		<li class="imgbox">
			<div class="">
				<img src="https://wx2.sinaimg.cn/orj360/006WGDZaly1g4fl75x6t6j30dl0dcjuv.jpg">
			</div>
		</li>
		<li class="imgbox">
			<div class="">
				<img src="https://wx2.sinaimg.cn/orj360/006WGDZaly1g4fl78bdzvj30d70jtjwf.jpg">
			</div>
		</li>
		<li class="imgbox">
			<div class="">
				<img src="https://wx1.sinaimg.cn/orj360/006WGDZaly1g4fl7bh153j30j60ionhs.jpg">
			</div>
		</li>
		<li class="imgbox">
			<div class="">
				<img src="https://wx1.sinaimg.cn/orj360/006WGDZaly1g4fl7cloz5j30j60j00zj.jpg">
			</div>
		</li>
	</ul>
</body>
</html>

效果圖：html