纯CSS实现自适应正方形

最新推荐文章于 2025-02-06 10:13:45 发布
原创 最新推荐文章于 2025-02-06 10:13:45 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用CSS创建自适应正方形的两种方法：通过设置垂直方向的padding和利用伪元素的margin-top。同时，文章讨论了这两种方法在面对内容溢出和max-height限制时的解决方案，以及浏览器兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有时候我们需要实现这种自适应不同手机屏幕的等宽正方形，如图：


刚开始自己很困惑，宽可以计算，那么高怎么随着宽的变化而变化呢？

后来查阅相关材料总结出两种方法：

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

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

1
2
3
4
.placeholder {
   width: 100%;
   padding-bottom: 100%;
}
最低0.47元/天 解锁文章

200万优质内容无限畅学
CSS中如何实现一个自适应正方形的元素
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-03 2230
一个自适应正方形指的是无论其容器或视口如何变化，它的宽度和高度都保持相同的元素。本文将探讨多种实现自适应正方形的方法，并提供详细的代码示例，帮助你理解其背后的原理。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。这种方法的优点在于它不需要设置高度，而是通过设置顶部内边距为宽度的一个百分比来实现。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，/* 高度也占父容器100%，此时高度等于宽度 */
秋招学习 - CSS 实现自适应正方形
vivi_in_purple的博客
10-23 416
实现一个自适应正方形关键就是使这个div的height=width。 利用CSS3新增的 vw, vh, vmin, vmax vw - 1/100视口宽度为一个单元； vh - 1/100视口高度为一个单元; vmin - 1/100 Min{视口宽，视口高}为一个单元; vmax - 1/100 Max{视口宽，视口高}为一个单元; .square{ width: 50%; /*50%父元素宽*/ height: 50vw; /*视口宽度的50%*/ background-color:
CSS 实现自适应正方形
weixin_47369373的博客
11-03 997
CSS 实现自适应正方形
纯CSS实现自适应正方形、自适应正方形布局
采黎的博客
02-27 2573
css自适应正方形，css实现自适应正方形，css实现宽高自适应正方形，css自适应正方形布局、css自适应正方形图片；提起自适应，想必都会想到rem、vw等相对单位，我们分别用这些单位来实现一下。
CSS实现自适应的正方形
最新发布
csdn_wzq的博客
02-06 464
在开发移动端时，会遇到类似于九宫格菜单的页面，宽度很好设置，一般设置为“33.333%”或者其他，但是高度呢？下面介绍几种常用方法。
css实现自适应正方形
weixin_30344795的博客
11-05 193
这里介绍7种方法，仅供参考。 1、vm单位 <div class="square-shape">这是一个可以自适应的正方形，此法适用于移动端web页面。</div> .square-shape { width: 50%; height: 50vw; border: 1px solid #f00; } 2、padding-top实现 ...
CSS实现一个自适应的正方形的方法示例
01-18
但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。 下面介绍两种比较简单的实现方法： 方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均...
html，css简单的自适应正方形九宫格
02-09
html，css简单的自适应正方形九宫格
CSS-自适应正方形的实现
qq_40007317的博客
11-26 1576
1、效果展示 html结构如下： <body> <div class="card-box"> <div class="card"></div> </div> </body> 2、实现方法 （1）设置垂直方向的padding 在 CSS 中，margin 和 padding 的百分比是相对于父元素的宽度来计算...
正方形 css,CSS实现自适应的正方形
weixin_31491059的博客
08-03 789
总体思路：由于height是不固定的，所以不能直接使用height值。因此转换思路使用width值来实现正方形的height赋值。所以理论上只要能够将宽度属性应用在高度属性的方法都可以。方案一：CSS3 vw 单位.placeholder {width: 50%;height: 50vw;background:green;}image.png方案二：设置垂直方向的 padding 撑开容器在 CS...
【CSS 面经】如何实现宽高自适应的正方形
lph159的博客
12-16 1147
Grid 布局是一种二维布局方式，允许我们在水平方向和垂直方向上同时控制元素的位置。通过 Grid 布局，可以更精确地控制元素的排列和大小。方法适用场景优点缺点响应式布局，适用于图片、图标等简单高效，适合自适应布局需要使用百分比值，可能影响其他布局行为Flexbox居中展示，卡片、按钮等支持居中对齐，灵活性高对于复杂布局可能不够灵活Grid网格布局，精确控制元素位置精确控制布局，适用于复杂的网格布局可能会多此一举，对于简单场景来说冗余。
CSS实现自适应正方形
pingwei_deng的博客
05-18 783
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS实现自适应正方形&lt;/title&gt; &lt;style&gt; /*使用padding-bottom实现正方形*/ #tes
使用CSS实现自适应正方形和等宽高比矩形
My_wife_QBL的博客
07-12 946
通过合理使用CSS的技巧和属性，可以轻松实现自适应正方形和等宽高比矩形。这不仅提升了页面的视觉效果，还能提高用户体验。希望本文能为开发者提供有价值的指导，帮助大家在实际项目中更好地应用这些CSS技巧。
前端面试：如何实现自适应正方形？
doomliu的博客
05-14 939
实现自适应的正方形效果，即让元素高度随宽度改变。 实现的思路是父元素设置宽度，子元素宽度100%，然后控制子元素撑开父元素的高度，撑开的高度和宽度成一定比例。正方形就是1:1，其他比例的实现原理相同。 有两种方式， 一种是使用子元素的padding-top或者padding-bottom撑开父元素高度，因为子元素的padding的百分比是相对于父元素的宽度。 另一种方法是用子元素的伪类将父元素高度撑开。 【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】 <!DOCTYPE ht
浅谈纯CSS实现自适应浏览器宽度的正方形
热门推荐
筱葭的博客
04-13 1万+
1、方案一：CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位，1vw = 1% viewport width，vh是相对于视口高度百分比的单位，1vh = 1% viewport height；vmin是相对当前视口宽高中较小的一个的百分比单位，同理 vmax是相对当前视口宽高中较大的一个的百分比单
2021-07-29 实现一个自适应正方形
huali_1995的博客
07-29 396
1、padding-top+position .box{ width:50%; padding-bottom:50%; } position：relative position-top:100%，就可以得到一个正方形的盒子 有时width不是100%，比如width：20%，这时，使得padding-top：20%，就可以。 即（padding-top/width = 1）就是正方形。 (padding-top/width=1/2)就是二比一的长方形 2、视窗单位 视窗是浏览器实际显示内容
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值