纯Css实现Div高度根据自适应宽度（百分比）调整

在当今响应式设计的热潮中，许多元素已经能够自动调整尺寸，实现高宽自适应的特性。如img标签，通过设置{width: 50%; height: auto;}，便能轻松实现图片高度随宽度变化的比例自适应。

我们的主角——最常用的标签Div，在这方面却显得有些力不从心。它不能像img那样简单地通过CSS规则实现宽高自适应。要实现div的高度与宽度成一定比例（例如1:1），需要我们动一些脑筋。经过实践摸索，有以下几种处理方式：

一种直接的方法是给div指定固定的宽高，再通过zoom属性来实现自适应。例如：

```css

div {

width: 50px;

height: 50px;

zoom: 1.1; / 可根据需要调整 /

}

```

这种方法虽然能实现等宽高的div，但其局限性较大，不够灵活，因此可以暂且PASS。

接下来，我们可以尝试通过JavaScript来动态调整div的高度。思路是：在窗口大小变化时，根据div的宽度来设置其高度。代码大致如下：

```css

div {

width: 50%;

}

```

```javascript

window.onresize = function() {

div.height = div.width; // 这里假设div有设置height和width的属性方法

};

```

这种方法虽然也能实现等宽高的div，但总觉得有点生硬，不够优雅。我们还在寻找更好的解决方案。

我们可以通过使用宽高的单位来实现。例如，我们可以将div的宽高都设置为视口宽度的百分比（vw），这样无论视口大小如何变化，div的宽高比例始终保持一致。示例如下：

```css

div {

width: 20vw; / 视口宽度的20% /

height: 20vw; / 同上 /

}

```

这种方法既简单又直观，能够很好地实现div的等比例宽高自适应。这还需要结合具体的项目需求和场景来灵活应用。希望这些方法能对你有所帮助！