如何让HTML/CSS中图片适配div宽高？求助解决右侧div图片宽度异常

你遇到的问题核心是右侧容器的宽度没有被正确维持，导致绝对定位的图片宽度计算异常，结合你的代码，以下是具体的修复方案：

1. 确保父容器是Flex布局 #

你提到左侧div占40%、右侧div占60%，但代码里没给出父容器样式。如果父容器不是Flex布局，右侧的width:60%可能无法和左侧正确并排，甚至导致宽度收缩。给父容器添加以下样式：

.container {
  display: flex;
  width: 100%;
}
.left-section {
  width: 40%;
}

（把.left-section换成你实际的左侧容器类名）

2. 给右侧容器添加box-sizing:border-box #

你的.right-section设置了border:2px solid green，默认的box-sizing:content-box会让边框宽度额外占用空间，导致容器实际宽度超出父容器的60%，进而被挤压变形。添加这个属性让边框包含在宽度内：

.right-section {
  box-sizing: border-box;
  /* 保留你原有的其他样式 */
  position: relative;
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 2px solid green;
}

3. 验证图片样式（可选） #

你的图片样式已经正确，但如果还是有问题，可以尝试给图片添加min-width:100%强制填满宽度：

.right-section .dashboard-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  object-fit: cover;
  z-index: -1;
}

完成以上修改后，右侧容器会稳定占据父容器的60%宽度，图片也会完全适配容器的宽高。

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