css实现div宽度自适应，宽高保持等比缩放

2023-08-15 11:55| 来源: 网络整理| 查看: 265

css实现div宽度自适应，宽高保持等比缩放 1、方式一2、方式二3、方式三4、方式四

1、方式一 .square { width: 30%; height: 30vh; border: 1px solid red; background-color: #00FFFF; }

在这里插入图片描述

2、方式二

由于margin, padding的百分比数值是相对父元素的宽度计算的，只需将元素垂直方向的一个padding值设定为与width相同的百分比就可以制作出自适应正方形了。但要注意，仅仅设置padding-bottom是不够的,若向容器添加内容，内容会占据一定高度，为了解决这个问题，需要设置height: 0。

.square2 { width: 30%; height: 0; padding-bottom: 30%; border: 1px solid red; background-color: #00FFFF; }

在这里插入图片描述

3、方式三

利用伪元素的margin(padding)-top撑开容器。max-height属性失效的原因是: max-height属性只限制于 height,也就是只会对元素的content height起作用。

解决方法是:用一个子元素撑开content部分的高度，从而使max-height属性生效。

首先需要设置伪元素，其内容为空，margin-top设置为100%。

但要注意，若使用垂直方向上的margin撑开父元素，仅仅设置伪元素是不够的，这涉及到margin collapse外边距合并的概念，由于容器与伪元素在垂直方向发生了外边距合并,所以撑开父元素高度并没有出现，解决方法是在父元素上触发BFC:设置overflow:hidden。

.square3 { width: 20%; /* 处理外边距合并 */ overflow: hidden; border: 1px solid red; background-color: #00FFFF; } .square3::after { content: ''; display: block; margin-top: 100%; }

在这里插入图片描述

4、方式四

若使用垂直方向上的padding撑开父元素，则不需要触发BFC。子元素的100%就相当于父元素的20%

.square4 { width: 20%; border: 1px solid red; background-color: #00FFFF; } .square4::after { content: ''; display: block; padding-top: 100%; }

在这里插入图片描述本篇文章内容来自微信小程序“前端面试星球”。

【本文地址】

公司简介

联系我们