css实现容器(宽高不等的)内部自适应的正方形
先来看需求:容器(宽高不等的)内部自适应的正方形
方案一:
设置垂直方向的 padding 撑开容器
在 CSS 盒模型中,一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定,margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了:
代码如下:
<!DOCTYPE html>
<html lang="zh">
原创
2020-08-14 20:09:17 ·
1687 阅读 ·
0 评论