CSS 自适应地改变 div 大小，保持宽高比

在本文中，我们将介绍如何使用 CSS 来自适应地改变 div 的大小，并保持其宽高比。在响应式设计中，保持元素的宽高比对于适配不同的屏幕尺寸非常重要。

阅读更多：CSS 教程

使用 padding 来实现固定比例

我们可以使用 CSS 中的 padding 属性来实现保持宽高比。下面是一个示例：

.container {
  position: relative; /* 使得内部元素以容器为参考 */
  padding-top: 50%; /* 保持容器的高度为宽度的50% */
}

.content {
  position: absolute; /* 允许内容元素相对于容器定位 */
  top: 0;
  left: 0;
  height: 100%; /* 使用高度为100%来填充容器 */
  width: 100%; /* 使用宽度为100%来填充容器 */
}

在上面的示例中，容器具有一个固定的宽度，并且通过 padding-top 属性的值来设置高度。通过设置容器的 padding-top 为宽度的百分比，我们可以保持容器的宽高比。

使用媒体查询以适配不同的屏幕尺寸

使用上述方法，我们已经可以实现在固定宽高比的情况下自适应地改变 div 的大小，但我们还需要根据不同的屏幕尺寸来进行适配。这可以通过使用媒体查询来实现。

下面是一个示例，演示了如何使用媒体查询来在不同屏幕尺寸下改变 div 的大小：

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .container {
    width: 100%; /* 在小屏幕下将宽度设置为100% */
    padding-top: 75%; /* 在小屏幕下将高度设置为宽度的75% */
  }
}

@media (min-width: 768px) {
  .container {
    width: 50%; /* 在大屏幕下将宽度设置为50% */
    padding-top: 25%; /* 在大屏幕下将高度设置为宽度的25% */
  }
}

上述示例中，我们使用媒体查询在小屏幕和大屏幕下设置不同的宽高比。通过设置不同的 padding-top 值以及宽度值，我们可以在不同的屏幕尺寸下自适应地改变 div 的大小。

使用 JavaScript 动态改变 div 大小

除了使用纯 CSS 的方法，我们还可以使用 JavaScript 来动态地改变 div 的大小。下面是一个示例：

<div id="container"></div>

<script>
  function resizeContainer() {
    var container = document.getElementById('container');
    var width = container.offsetWidth;
    container.style.height = width * 0.5 + 'px';
  }

  window.addEventListener('resize', resizeContainer); // 在窗口大小改变时调整 div 大小
  resizeContainer(); // 初始化 div 大小
</script>

在上述示例中，我们使用 JavaScript 的 offsetWidth 属性获取容器的宽度，并根据宽度计算出相应的高度，从而保持宽高比。为了在窗口大小改变时自动调整 div 大小，我们还添加了一个 resize 事件监听器。

总结

本文介绍了如何使用 CSS 和 JavaScript 来实现自适应地改变 div 大小，并保持宽高比。我们通过使用 padding 属性和媒体查询来实现在不同屏幕尺寸下的适配。同时，我们还学习了如何使用 JavaScript 来动态地改变 div 的大小。通过这些方法，我们可以轻松实现在不同设备上呈现具有固定宽高比的元素。希望本文对您有所帮助！