css 图片不固定大小居中显示

最新推荐文章于 2025-05-15 17:31:57 发布

chipeng6838

最新推荐文章于 2025-05-15 17:31:57 发布

阅读量499

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2400070/blog/3066969

本文介绍了一种用于展示微博图片的HTML和CSS布局方法，通过使用响应式设计和inline-block属性，实现了图片的网格布局，适应不同设备屏幕尺寸。

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

参考新浪微博

<!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>

效果图：