html怎么做一个正方形,纯 CSS 实现自适应正方形

在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 Flipbord 的移动页面:

html怎么做一个正方形,纯 CSS 实现自适应正方形_第1张图片

那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢?

方案一:CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位 vw, vh, vmin, vmax。其中 vw 是相对于视口宽度百分比的单位,1vw = 1% viewport width, vh 是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin 是相对当前视口宽高中 较小 的一个的百分比单位,同理 vmax 是相对当前视口宽高中 较大 的一个的百分比单位。该单位浏览器兼容性如下:

html怎么做一个正方形,纯 CSS 实现自适应正方形_第2张图片

利用 vw 单位,我们可以很方便做出自适应的正方形:

.placeholder {

width: 100%;

height: 100vw;

}

优点:简洁方便

缺点:浏览器兼容不好

方案二:设置垂直方向的 padding 撑开容器

在 CSS 盒模型中,一

你可能感兴趣的:(html怎么做一个正方形)