css实现容器(宽高不等的)内部自适应的正方形

先来看需求:容器(宽高不等的)内部自适应的正方形



方案一:宽高设置为vw,vh


<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.box {
				width: 40vw;
				height: 40vw;
				background: red;
			}
		style>
	head>
	<body>
		<div class="container">
			<div class="box">
			div>
		div>
	body>
html>

这种方式最简单了,缺点:它是基于窗口的宽高的,不是基于父元素的宽高的


方案二:

设置垂直方向的 padding 撑开容器
在 CSS 盒模型中,一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定,margin, padding 的百分比数值是相对 父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了:

代码如下:


<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.box {
				width: 50%;
				height: 0;
				padding-bottom: 50%;
				background: red;
				overflow: hidden;
			}
		style>
	head>

	<body>

		<div class="container">
			<div class="box">

			div>
		div>

	body>

html>
为什么需要设置height:0,如果不设置,box中有内容的话,会出现如下现象



方案三:利用伪元素的 margin(padding)-top 撑开容器,在加一个绝对定位容器放置内容

这个其实和方案一思路一样,只不过使用伪元素副作用更小


<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.container {
				width: 100%;
				/*只是为了证明宽高不等而已*/
				height: calc(100vw + 100px);
				background: skyblue;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.box {
				position: relative;
				width: 50%;
				background: red;
				overflow: hidden;
			}
			
			/*伪元素的目的是用来撑开父容器的*/
			.box::after {
				content: "";
				display: block;
				margin-top: 100%;
				/*padding-top: 100%;*/
			}
			
			/*单独增加一个容器,用来放置内容*/
			.content {
				position: absolute;
				width: 100%;
				height: 100%;
			}
		style>
	head>

	<body>

		<div class="container">
			<div class="box">
				<div class="content">
					我是内容我是内容我是内容我是内容我是内容我是内容
				div>
			div>
		div>
	body>
html>

应用:

可以用于一些图片的自适应展示:

<style type="text/css">
			img{
				width: 100%;
				height: 100%;
			}
style>
<body>
		<div class="container">
			<div class="box">
				<div class="content">
					<img src="aa.png"/>
				div>
			div>
		div>
body>

你可能感兴趣的:(前端,css,自适应,前端,css,自适应)