纯css固定宽高比

css

引入问题

在我们做项目时，时常会有高度不确定的情况，但经常碰到固定宽高比需求，这时就有点抓虾了。第一想到的可能就是通过 js 来实现了。但是我想说，纯 css 一样可以实现，而且比较简单。

发现问题

例如实现下面这个效果:
image.png

首先我们需要对元素进行分列，这里分为四列，这里我是通过百分比进行的分列，宽度为20%，然后剩余的20%分给方块之间的 margin，这样就实现了四列布局，但是当我们改变这个容器的大小测试时，由于容器的width变化，导致每个小方块的 width 值时大时小，会发现方块并不是按长和宽1比1来的，也就是说不是正方形。

解决问题

那么，怎么才能让长宽比维持在1：1呢，通过css来实现的方法也很多，但是，重要的是要抓住和理解这么一个原理

1
当元素的padding或者margin使用的不是具体数值，而是百分比时，元素的margin及padding是相对其父元素的width而言的

从这里我们可以知道，当我们设置 margin或padding 的上下边距（竖直方向）为百分比时，是相对其父元素宽度（水平方向）而言的，这也就建立了长（竖直方向）与宽（水平方向）的关系。

  1. 通过添加填充div撑起小方块高度实现

html代码

1
2
3
4
<div class="square">
	<div class="fill"></div>
	<div class="content">hello world</div>
</div>

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.square {
  position: relative;
  border: 1px solid blue;
  /* overflow: hidden; */
  width: 20%;
  box-sizing: border-box;
}
.fill {
  padding-bottom: 100%; // 或 margin-bottom: 100%;
}
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid red;
  box-sizing: border-box;
}

效果图：
image.png
2.通过伪元素:after或者:before实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.square {
  position: relative;
  border: 1px solid blue;
  /* overflow: hidden; */
  width: 20%;
  box-sizing: border-box;
}
.square:before //.square:after  {
  content: '';
  display: block;
  height: 0;
  padding-bottom: 100%; // 或 margin-bottom: 100%;
}
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid red;
  box-sizing: border-box;
}

效果完全相同