css实现自适应正方形

标签：height   bottom   方向   图片   显示   效果   屏幕   ott   idt   

预期效果：一行显示三张图片，宽度随屏幕宽度而改变。css3的新单位vw vh由于兼容性问题就不提了。

一个比较好的方案是：设置垂直方向的 padding 撑开容器

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

.placeholder {
    width: 100%;
    height:0;
    padding-bottom: 100%;
}

css实现自适应正方形

标签：height   bottom   方向   图片   显示   效果   屏幕   ott   idt   

原文地址：https://www.cnblogs.com/guagnxu/p/10008968.html