纯 CSS 实现自适应正方形

joyqi 发布于2019-08-01 16:52 / 2816人阅读

摘要：如果需求是制作相对视口高度自适应的正方形，估计就只能使用单位了吧转自纯实现自适应正方形

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

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

方案一：CSS3 vw 单位

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

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

  

.placeholder {
  width: 100%;
  height: 100vw;
}

实现效果

优点：简洁方便
缺点：浏览器兼容不好

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

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

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

实现效果

这时一切看起来都很正常，我们试着给容器内增加内容：

咦？高度怎么溢出了？我们来看这时的盒模型：

如图中所示，内容区域占据了 38px 的高度。为了解决这个问题，我们可以设置容器的高度为 0：

.placeholder {
  height: 0;
}

这种方案简洁明了，且兼容性好；但是除了填充内容后会出现问题以外，还有可能碰上 max-height 不收缩：DEMO，于是第三种方案来了：

方案三：利用伪元素的 margin(padding)-top 撑开容器

在方案二中，我们利用百分比数值的 padding-bottom 属性撑开容器内部空间，但是这样做会导致在元素上设置的 max-height 属性失效：

而失效的原因是 max-height 属性只限制于 height，也就是只会对元素的 content height 起作用。那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？我们来试试：

.placeholder {
  width: 100%;
}

.placeholder:after {
  content: "";
  display: block;
  margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

一刷新页面，啊嘞？怎么什么也没有？

这里就涉及到 margin collapse 的概念了，由于容器与伪元素在垂直方向发生了外边距折叠，所以我们想象中的撑开父元素高度并没有出现。而应对的方法是在父元素上触发 BFC：

.placeholder {
  overflow: hidden;
}

注：若使用垂直方向上的 padding 撑开父元素，则不需要触发 BFC
实现效果

OK，父元素被撑起来了，我们再试一试设置 max-height：

完美！什么？你说元素内部添加内容时高度会溢出？来人，把这个叛徒拖出去喂狗！对于这样的情况，可以将内容放到独立的内容块中，利用绝对定位消除空间占用。

结语

以上就是我目前所想到的三种制作自适应正方形的方案，抛去 CSS3 中的视口相对单位，主要利用到 margin, padding 的百分比数值相对父元素宽度的宽度计算得出 来制作宽高相等、且相对视口宽度自适应的正方形。如果需求是制作相对视口高度自适应的正方形，估计就只能使用 vh 单位了吧~

转自：纯 CSS 实现自适应正方形

GPU云服务器云服务器 css自适应 css图片自适应 asp 自适应css 纯CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50797.html

纯 CSS 实现自适应正方形

摘要：如果需求是制作相对视口高度自适应的正方形，估计就只能使用单位了吧转自纯实现自适应正方形在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：showImg(https://segmentfault.com/img/bVNVjL?w=377&h=666); 那么应该怎么使用纯 CSS 制作出能够自适应大小的正...

Freelander 2019-08-29 12:36 评论0 收藏0
css自适应正方形的方案

摘要：网上搜罗的一个方法，利用代码如下，不过本人木有实现成功，欢迎大家留言已实现成功的。并且这个方法兼容性目前来说还较差。所以放在最后一个，不太推荐，不过还是很好奇，这个东西是怎么实现的。经过搜索查找，总结几种常用的css自适应的正方形的解决方案： html代码：以下为几种解决方案：利用padding-bottom:100%撑开，如果无内容可不设...

syoya 2019-08-29 11:14 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
【CSS练习】IT修真院--练习1-九宫格

摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。九宫格——用html+css制作一个网页一. 目标效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述圆角...

Tecode 2019-08-29 15:34 评论0 收藏0