为了实现自适应宽度的div，根据不同的宽度按照预设的高宽比动态调整高度，可以采用CSS的padding-top技巧或者CSS3的aspect-ratio属性（实验性功能）。 **方法一：使用padding-top技巧** ```css .div { position: relative; width: 100%; /* 根据需要设置宽度，这里假设为100%自适应父元素宽度 */ padding-top: calc(56.25%); /* 假设高宽比为16:9，那么padding-top应为56.25% */ height: 0; overflow: hidden; } .div-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } ``` 在HTML中： ```html ``` **方法二：使用CSS3的aspect-ratio属性（仅限支持此特性的浏览器）** ```css .div { width: 100%; aspect-ratio: 16 / 9; /* 高宽比为16:9 */ } ``` 需要注意的是，`aspect-ratio`属性是CSS3的一个新特性，目前并非所有浏览器都支持。在实际项目中，请确保你的目标浏览器环境支持这一特性，或者配合使用兼容性前缀和渐进增强策略。