html+css实现自适应正方形图片显示

风信子 2021-01-01 18:11:15 1284℃

效果图预览

完整html代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<title>自适应正方形图片显示</title>
	<style type="text/css">
		#app {
			display: flex;
			max-width: 540px;
			margin: auto;
			justify-content: space-around;
			flex-wrap: wrap;
			padding: 0 2%;
		}

		.item {
			/* 图片宽度 */
			width: 30%;
			/* 图片高度 */
			padding-bottom: 30%;
			height: 0;
			overflow: hidden;
			position: relative;
			margin-top: 20px;
			border-radius: 10%;
		}

		.img-item {
			position: absolute;
			width: 100%;
			height: 100%;
			/* 截取图片正中心 */
			object-fit: cover;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="item">
			<img class="img-item" src="https://api.ixiaowai.cn/gqapi/gqapi.php?t=1">
		</div>
		<div class="item">
			<img class="img-item" src="https://api.ixiaowai.cn/gqapi/gqapi.php?t=2">
		</div>
		<div class="item">
			<img class="img-item" src="https://api.ixiaowai.cn/gqapi/gqapi.php?t=3">
		</div>
		<div class="item">
			<img class="img-item" src="https://api.ixiaowai.cn/gqapi/gqapi.php?t=4">
		</div>
		<div class="item">
			<img class="img-item" src="https://api.ixiaowai.cn/gqapi/gqapi.php?t=5">
		</div>
		<div class="item">
			<img class="img-item" src="https://api.ixiaowai.cn/gqapi/gqapi.php?t=6">
		</div>
	</div>
</html>
标签: HTML, CSS

非特殊说明,本博所有文章均为博主原创。