如何使HTML/CSS中绝对定位的图片保持宽高比并实现响应式？

问题出在你同时给图片设置了基于vw的宽度和基于vh的高度，两者参考基准不同，导致视口变化时宽高比失衡。以下是两种可行的解决方案：

方法一：使用CSS aspect-ratio属性（现代浏览器推荐） #

直接利用CSS原生的宽高比属性，让图片自动保持比例，同时用视口单位控制尺寸，搭配object-fit保证图片显示效果：

修改后的CSS代码：

.intro {
  width: 100vw;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
  overflow: overlay;
  /* 原flex布局未作用于绝对定位的图片，可按需保留或移除 */
}
.intro .sensei-img {
  position: absolute;
  left: 5vw;
  bottom: -10vh;
  width: 70vw;
  /* 根据图片实际宽高比设置，示例为7:10（宽7高10），请替换为你的图片真实比例 */
  aspect-ratio: 7/10;
  /* 可选：contain完整显示图片，cover填满容器裁剪多余部分 */
  object-fit: contain;
}

说明：

• aspect-ratio 会让元素高度随宽度自动按比例计算，确保视口变化时比例不变
• object-fit 避免图片拉伸变形，根据需求选择contain或cover

方法二：利用padding百分比兼容旧浏览器 #

如果需要兼容不支持aspect-ratio的旧浏览器，可通过容器的padding特性模拟宽高比：

修改后的HTML代码：

<div class="intro">
  <div class="sensei-img-container">
    <img src="https://i.sstatic.net/GGDym.png" class="sensei-img">
  </div>
</div>

修改后的CSS代码：

.intro {
  width: 100vw;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
  overflow: overlay;
}
.sensei-img-container {
  position: absolute;
  left: 5vw;
  bottom: -10vh;
  width: 70vw;
  /* 宽高比计算公式：(图片高度/图片宽度)*100%，示例为10/7*100%≈142.86% */
  padding-top: 142.86%;
  height: 0;
  overflow: hidden;
}
.sensei-img-container .sensei-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

说明：

• 容器的padding-top百分比基于自身宽度计算，以此模拟固定宽高比
• 图片绝对定位填满容器，通过object-fit保证显示效果

注意：请根据你使用的图片真实宽高比调整aspect-ratio或padding-top的数值，确保比例准确。

内容的提问来源于stack exchange，提问作者spadletskys