css实现自适应正方形

最新推荐文章于 2024-07-25 09:45:35 发布

南西Nancy

最新推荐文章于 2024-07-25 09:45:35 发布

阅读量270

点赞数

分类专栏：前端CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/qmnanxi/article/details/108653616

版权

前端CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

由于padding和margin的百分比是根据父元素的宽度计算的，所以当宽度是100%时，可以通过设置padding-top(bottom)或margin-top(bottom)的百分比挤成任意比例的矩形。下面就拿正方形举例，啥也不说了，上代码.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.square-wrap {
				width: 200px;
				height: 500px;
				margin: 0 auto;
			}
			.square{
		        width: 100%;
				padding-top: 100%; /* padding-bottom: 100%; */
		        background: #ccc;
		    }
		 </style>
		<title></title>
	</head>
	<body>
		<div class="square-wrap">
			<div class="square"></div>
		</div>
		
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.square-wrap {
				width: 200px;
				height: 500px;
				margin: 0 auto;
			}
			.square{
		        width: 100%;
				overflow: hidden;  /* 防止margin塌陷,开启BFC */
		        background: #666;
		    }
			.con {
				width: 100%;
				margin-top: 100%; /* margin-bottom: 100%; */
			}
		 </style>
		<title></title>
	</head>
	<body>
		<div class="square-wrap">
			<div class="square">
				<div class="con"></div>
			</div>
		</div>
		
	</body>
</html>