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

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

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

1、方式一


<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>

css实现div宽度自适应,宽高保持等比缩放_第1张图片

2、方式二

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

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

css实现div宽度自适应,宽高保持等比缩放_第2张图片

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

css实现div宽度自适应,宽高保持等比缩放_第3张图片

4、方式四

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

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

css实现div宽度自适应,宽高保持等比缩放_第4张图片
本篇文章内容来自微信小程序“前端面试星球”。

你可能感兴趣的:(css日常总结,css,css3)