实现高度自适应等于宽度的正方形盒子

最新推荐文章于 2023-09-05 16:21:14 发布
最新推荐文章于 2023-09-05 16:21:14 发布
阅读量964 收藏 1
点赞数 4
CC 4.0 BY-SA版权
文章标签： css 自适应
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43387238/article/details/86131206
本文介绍了一种使用CSS的padding-bottom属性配合百分比值来创建自适应正方形的方法。通过将div元素的width和padding-bottom设置为相同百分比值，并将height设为0且隐藏溢出内容，可以确保在不同屏幕尺寸下，该div始终呈现为正方形。

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

padding-bottom为百分比时，是相对宽度取百分比值

div {
  width:  20％;
  padding-bottom:  20％;
  height: 0;
  overflow:  hidden;
}

这样就能实现自适应的正方形
高度设置为0能保证盒子不被内容撑开

K_Kamen_Yip
关注
html在页面显示一个正方形,CSS实现一个自适应的正方形的方法示例
weixin_36051064的博客
05-30 3281
传统方法正方形用固定的形式写 直接长＝宽写固定的值如下.box{width: 200px;height: 200px;background: pink;color: #666;}但是很多情况下，在移动端的设计里，图片的宽度随着不同的移动设备进行改变的，这个时候就需要用到自适应的正方形的实现。下面介绍两种比较简单的实现方法：方法一：CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位...
【应用】三列布局 - 两边固定宽度,中间自适应,高度一致
Dora_5537的博客
10-05 1380
一、Flex 布局 图1 <!DOCTYPE html> <html> <head> <title>三列布局-两边固定宽度,中间自适应,高度一致</title> <style> html,body{ margin: 0; padding: 0; } #main{ width: 100%...
get新技能： 如何设置元素高度与宽度成特定比例。宽度改变，高度自动按比例改变。 例如设置宽高比16:9。...
weixin_34228662的博客
11-13 627
设置宽高比在很多时候是有用的。 下面的栗子，我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div class="wrapper"> <div class="content">content</div> </div>...
移动端布局：写一个自适应的正方形盒子【原创】
09-21 446
移动端布局，div按比例布局，宽度为百分比，让高度和宽度一样，即让div为正方形 最近在写一个小程序，遇到了一个布局问题:一个div宽度比例width:20%，比如是屏幕宽度的20%,想让高度和宽度一样，即让这个div是正方形，怎么实现呢？因为做的是移动端，屏幕宽度不定，又想让这个div盒子宽高一样，呈现为正方形。效果如下： 现在将查询到的方案汇总一下： 方案一：J...
css实现自适应正方形
秦璐璐的博客帝国
06-12 295
&lt;style&gt; /* 第一种 */ .placeholder { width: 100px; height: 0; padding-bottom: 100px;/* margin 百分比相对宽度计算 */ background: #eee; } /* 第二种 */ .placeholder { wid...
关于vant轮播图使用时高度自适应问题及自定义轮播图指示器
优快云_44615025的博客
04-03 3539
使用vant的swipe组件创建轮播图，但想要使轮播的时候高度自适应，却发现当前显示轮播区域的高度固定，是由内容最高的轮播区域撑起的高度，这样就造成有的内容少的轮播部分下方很大空白，无法实现自适应高度；另一个就是想要自定义轮播指示器的样式。解决方法：当前轮播区域展示时，把其他未展示的轮播区域内容display：none即可，这样每个swipe-item的高度就只有展示时的高度所决定，可以使用v-show来实现；这样就解决了自适应高度和自定义指示器问题。
CSS：宽高自适应详解
ZJH_are的博客
07-17 9951
2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小！-浏览器的高度默认是0,html,body{height100%}-HTML,BODY表示浏览器,默认是块级元素,宽度是100%...
CSS实现宽度自适应宽高16:9的矩形的示例
01-18
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.jb51.net/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度，假设宽100%，那么高为h=9/16=56.25% 第二步利用之前所说设置...
帮我写一个html和css布局, 要求在一个宽度1200的盒子内,有12个宽高相等的正方形盒子,一排四个上下对齐, 盒子可以自适应宽度
06-01
... <div class="box"></div> <div class="box"></div> <div class="box"></div> ...这样，我们就可以在一个宽度为1200px的容器中，以4x3的方式放置12个宽高相等的正方形盒子元素，并且它们可以自适应容器的宽度。
css盒子固定正方形
最新发布
03-14
根据提供的引用内容，实现自适应正方形通常用百分比或者padding-top的方法，但用户这次需要的是固定大小，不是自适应的。所以可能需要调整方法。 用户提到的“固定尺寸”应该是指宽度和高度都设定为具体的数值，...
css设置盒子自适应宽度或高度
weixin_42596287的博客
12-18 5918
css设置盒子自适应宽度或高度
css实现不等高块状元素盒子按照高度自适应（最高的盒子）
qq_37759901的博客
09-05 664
2.不给boxItem 高度，同行不等高块状元素按照最高的盒子自适应内容动态来保持高度一致。1.boxItem g给盒子高度33%，整行自动缩放高度。
vue div盒子宽高随另一个盒子自适应
细节怪的博客
09-13 2417
两个盒子的高度不固定，且右侧盒子高度随左侧盒子高度变化。
实现div盒子的高度随页面内容增多而变化（自适应高度）效果
热门推荐
weixin_46353030的博客
07-20 1万+
一、功能需求： 给三个div盒子，实现对处于中间的div盒子隐藏多余内容。此时配置一个show按钮，当点击show按钮后将被隐藏的内容显示出来，并令后一个div盒子向下移动适当距离。保持三个div盒子的布局。 二、实现核心 方法在于max-height属性、overflow属性和display:inline-block属性 三、具体实现： 对中间的div设置一个max-height高度+overflow:hidden属性+display:inline-block属性； 用js获取show按钮和处于中间
【css3】神奇的3*3根据父节点宽度自适应的盒子
KatyLight的博客
10-17 282
神奇的3*3盒子根据父节点自适应宽度。
根据屏幕高度盒子自适应高度vue
weixin_41166682的博客
03-11 2396
1.需求 pc端开发的时候，比如有个盒子需要跟着屏幕的高度变化而变化，那么就需要设置他的高度 2.实现 在template中，以设置穿梭框的高度为例 <div> <span>选择收件角色</span> <el-transfer :titles="['所有角色', '已选角色']" filterable ...
纯CSS实现Div高度根据自适应宽度（百分百调整）
weixin_33834075的博客
04-12 1300
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现Div高度根据自适应宽度（百分百调整）</title> </head> <style> ...
纯Css实现Div高度根据自适应宽度（百分比）调整
weixin_30487201的博客
03-03 5301
在如今响应式布局的要求下，很多能自动调整尺寸的元素能够做到高宽自适应，如img，通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整。 然而，用的最多的标签一哥Div却不能做到自动调整（要么从父级继承，要么自行指定px，要么给百分比！但是这个百分比是根据父级的高度来计算的，根本不是根据元素自身的宽度，那么就做不到Div的宽高达成一定的比例=-=）。 要实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值