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