在创建响应式网页设计时，保持 div 元素的宽高比是一项常见要求。本文将探讨如何使用 CSS 在窗口宽度变化时保持 div 元素的宽高比。

为了实现这一点，我们将使用内边距技巧。内边距技巧是一种通过为上内边距或下内边距设置百分比值来保持元素宽高比的技术。该百分比值基于父元素的宽度计算得出。当父元素的宽度发生变化时，内边距值也会随之调整，以保持子元素的宽高比。

我们先来创建一个带有背景颜色的div元素。

<div class=”aspect-ratio”></div>

<style>
.aspect-ratio {
background-color: #ccc;
}
</style>

为了保持此div的宽高比，我们将它的padding-top值设置为百分比。该百分比值将根据div所需的宽高比计算得出。例如，如果我们希望宽高比为16:9，则将值设置为padding-top56.25%（9/16 * 100）。

.aspect-ratio {
background-color: #ccc;
padding-top: 56.25%;
}

现在，随着父元素宽度的变化，内边距值也会随之调整。

这里有一个示例，展示了如何在带有背景图像的 div 元素上使用 padding hack。

<div class=”aspect-ratio” style=”background-image: url(‘image.jpg’)”></div>

<style>
.aspect-ratio {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}

.aspect-ratio:before {
content: “”;
display: block;
padding-top: 56.25%;
}

.aspect-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

在这个例子中，我们再次使用了内边距技巧，并且使用了一个伪元素（`<div> :before`）来创建内边距。我们将position父元素的 `<div>` 属性设置为 `relative`，并将position子元素的 `<div>` 属性absolute设置为 `<div>`，以使子元素位于父元素内部。我们还将子元素的 `<div>`width和`<div>` 属性设置height为 100%，以使子元素填充父元素。

总之，内边距技巧是一种简单有效的方法，可以在窗口宽度变化时保持 div 元素的宽高比。通过为 padding-top 或 padding-bottom 设置百分比值，我们可以根据所需的 div 元素宽高比计算内边距值。这项技术广泛应用于响应式网页设计，可用于创建各种布局和设计。