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

最新推荐文章于 2023-11-04 18:58:10 发布

丑小鸭变黑天鹅

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量1.9w

点赞数 3

分类专栏： css日常总结文章标签： css css3

本文链接：https://blog.csdn.net/qq_41880073/article/details/115300190

版权

css日常总结专栏收录该内容

25 篇文章 3 订阅

订阅专栏

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

1、方式一
2、方式二
3、方式三
4、方式四

1、方式一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.square {
				width: 30%;
				height: 30vh;
				border: 1px solid red;
				background-color: #00FFFF;
			}
		</style>
	</head>
	<body>
		<div class="square"></div>
	</body>
</html>

在这里插入图片描述

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%;
			}

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

丑小鸭变黑天鹅

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
css实现div宽度自适应，宽高保持等比缩放

css实现div宽度自适应，宽高保持等比缩放1、方式一2、方式二3、方式三4、方式四1、方式一<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .square { width: 30%; height: 30vh; border: 1px so
复制链接

扫一扫