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

最新推荐文章于 2023-12-02 16:15:24 发布

codingWeb

最新推荐文章于 2023-12-02 16:15:24 发布

阅读量1.6k

点赞数 1

分类专栏：前端 css 自适应文章标签：前端 css 自适应

本文链接：https://blog.csdn.net/fesfsefgs/article/details/108011920

版权

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

在这里插入图片描述

方案一：宽高设置为vw，vh

<!DOCTYPE html>
<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">

最低0.47元/天解锁文章

codingWeb

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现容器(宽高不等的)内部自适应的正方形

先来看需求：容器(宽高不等的)内部自适应的正方形方案一：设置垂直方向的 padding 撑开容器在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对父元素宽度的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：代码如下：<!DOCTYPE html><html lang="zh">
复制链接

扫一扫