纯css实现高度与宽度固定比例

最新推荐文章于 2022-07-14 09:40:32 发布

weixin_34163741

最新推荐文章于 2022-07-14 09:40:32 发布

阅读量1.4k

点赞数

原文链接：https://juejin.im/post/5b3b6078e51d451986510154

版权

纯css实现高度与宽度固定比例

原理: padding的百分比计算是根据父元素的宽度来计算。

因此我们可以为子元素的padding-bottom设置为50%，然后设置高度为0，宽度设置为100%，这样就我们就得到了一个高度为宽度的50%的div，但是因为这个盒子的高度是0,如果我们在这个div里直接写内容，就会出现各种问题(比如flex布局不能用)，
所以加了一个绝对定位的div，设置top: 0; bottom: 0; left: 0; right: 0;使这个div的高度和宽度是父元素的100%，到此就获得了一个高度为宽度一半的div,并且可以正常的布局了。
改padding-bottom的百分比, 就可以获得想要的比例了。

<html>
	<head>
	<style>
	.parent {
		width: 800px;
	}
	.child {
		height: 0;
		padding-bottom: 50%;
		position: relative;
	}
	.content {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: pink;
	}
	</style>
	</head>
	<body> 
	<div class="parent">
		<div class="child">
			<div class="content">
			</div>
		</div>
	</div>
	</body>
</html>
复制代码

weixin_34163741

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css实现高度与宽度固定比例

纯css实现高度与宽度固定比例原理: padding的百分比计算是根据父元素的宽度来计算。因此我们可以为子元素的padding-bottom设置为50%，然后设置高度为0，宽度设置为100%，这样就我们就得到了一个高度为宽度的50%的div，但是因为这个盒子的高度是0,如果我们在这个div里直接写内容，就会出现各种问题(比如flex布局不能用)，所以加了一个绝对定位的div，设置t...
复制链接

扫一扫