css实现容器(宽高不等的)内部自适应的正方形

先来看需求：容器(宽高不等的)内部自适应的正方形方案一：设置垂直方向的 padding 撑开容器在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：代

codingWeb

1832人浏览 · 2020-08-14 20:09:17

codingWeb · 2020-08-14 20:09:17 发布

先来看需求：`容器(宽高不等的)内部自适应的正方形`

在这里插入图片描述

方案一：宽高设置为vw，vh

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.box {
				width: 40vw;
				height: 40vw;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box">
			</div>
		</div>
	</body>
</html>

这种方式最简单了，缺点：它是基于窗口的宽高的，不是基于父元素的宽高的

方案二：

设置垂直方向的 padding 撑开容器
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：

代码如下：

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.box {
				width: 50%;
				height: 0;
				padding-bottom: 50%;
				background: red;
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="box">

			</div>
		</div>

	</body>

</html>

为什么需要设置`height:0`,如果不设置，box中有内容的话，会出现如下现象

在这里插入图片描述

方案三：利用伪元素的 margin(padding)-top 撑开容器,在加一个绝对定位容器放置内容

这个其实和方案一思路一样，只不过使用伪元素副作用更小。

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.box {
				position: relative;
				width: 50%;
				background: red;
				overflow: hidden;
			}
			
			/*伪元素的目的是用来撑开父容器的*/
			.box::after {
				content: "";
				display: block;
				margin-top: 100%;
				/*padding-top: 100%;*/
			}
			
			/*单独增加一个容器，用来放置内容*/
			.content {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>

		<div class="container">
			<div class="box">
				<div class="content">
					我是内容我是内容我是内容我是内容我是内容我是内容
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

应用：

可以用于一些图片的自适应展示：

<style type="text/css">
			img{
				width: 100%;
				height: 100%;
			}
</style>
<body>
		<div class="container">
			<div class="box">
				<div class="content">
					<img src="aa.png"/>
				</div>
			</div>
		</div>
</body>