在处理移动端页面时,我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果,比如,商品详情页,
方法1、CSS3 vw单位
CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width, vh 是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin 是相对当前视口宽高中 较小 的一个的百分比单位,同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。该单位浏览器兼容性查看:
优点:简洁方便
缺点:浏览器兼容不好
方法2、设置垂直方向的padding撑开容器
在 CSS 盒模型中,一个比较容易被忽略的就是 margin, padding 的百分比数值计算。
按照规定,margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形
这种方案简洁明了,且兼容性好;但。。。可能碰上max-height不收缩,怎么办 ? 那就用方法3...
方法3、利用伪元素的 margin(padding)-top 撑开容器
这里就涉及到的概念,由于容器与伪元素在垂直方向发生了外边距折叠,所以我们想象中的撑开父元素高度并没有出现。而应对的方法是在父元素上触发 BFC:overflow:hiddden;
若使用垂直方向上的 padding 撑开父元素,则不需要触发 BFC,如下:
注意:当元素内部添加内容时高度出现溢出,可以将内容放到独立的内容块中,利用绝对定位消除空间占用,如下:
内容