div高度跟随宽度自动等比缩放，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7

            
            <div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">3</div>
  <div class="item">3</div>
</div>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

            
            * {
  box-sizing: border-box;
}
body {
}
.container {
  width: 100%;
  border: 5px solid #f44;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
    
}
.item {
  margin: 5px;
  border: 5px solid #44b;
   /* 控制宽度 */
  width: 30%;
  /* 保持宽高比为1:1 */
  aspect-ratio: 1 / 1; 

  
}

格式化

预览

控制台