div或img图片高度随宽度自适应的方法

要让div或img图片的高度随宽度自适应，需要使用CSS来实现。下面是具体的步骤：

步骤一：设置宽度

首先，为div或img元素设置指定的宽度。这可以通过width属性来完成。

/* 设置div元素的宽度 */
div {
  width: 100%;
}

/* 设置img元素的宽度 */
img {
  width: 100%;
}

上面的代码中，将元素的宽度设置为100%可以确保它们将根据父容器的宽度进行缩放。

步骤二：设置高度

接下来，为div或img元素指定高度。但是，我们不会指定一个确切的高度值，而是使用padding-top属性来为元素提供一个占位符，以便它按比例缩放。

例如，如果您要将元素的纵横比设置为16:9，那么可以使用以下CSS：

/* 为div元素设置16:9的纵横比 */
div {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

/* 为img元素设置16:9的纵横比 */
img {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

在上面的CSS代码中，padding-top: 56.25%是由16除以9得出的结果，并在将其转换为百分比后获得的。

示例说明

示例一：使用div嵌套img实现自适应

在这个示例中，我们先构建一个div容器，并将其宽度设置为100%。然后，我们将一个img元素包裹在其中，并设置padding-top为56.25%，以实现16:9的纵横比。在这个过程中，img元素会自动缩放并填满div容器。

<div class="wrapper">
  <img src="example.jpg">
</div>

.wrapper {
  width: 100%;
  position: relative;
  padding-top: 56.25%; /*16:9的纵横比*/

}

.wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*其他辅助属性，用于背景颜色、定位等*/
}

上面的CSS代码中，.wrapper类是一个包装器，用于设置容器的宽度，并为嵌套的img元素设置纵横比。

.wrapper img是用于设置img元素的CSS类。position: absolute;和top: 0; left: 0;用于将图像定位为容器的顶部和左侧。width: 100%; height: 100%;可以让图像填充整个容器，同时使用object-fit: cover;指定在缩放图像时保持其宽高比，并将其放大到填充整个容器。

示例二：使用CSS自定义属性和calc()函数实现自适应

在这个示例中，我们使用CSS自定义属性和calc()函数来实现自适应。需要提前计算出图片的纵横比。

<div class="wrapper">
  <img src="example.jpg">
</div>

.wrapper {
  --aspect-ratio: 16/9;
  position: relative;
  width: 100%;
  padding-top: calc(1 / var(--aspect-ratio) * 100%);
}

.wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*其他辅助属性，用于背景颜色、定位等*/
}

上面的CSS代码中，--aspect-ratio是一个CSS自定义属性，用于存储图像的纵横比。padding-top属性使用calc()函数将元素的高度设置为它的宽度的1/var(--aspect-ratio)的百分比。这将自动根据元素的宽度计算出其高度。

imh元素的CSS设置与前面的示例类似，它将图像放置于容器的左上角，并确保它填充整个容器。