通过 CSS 的 object-fit 配合绝对定位与明确的宽高继承，可使图片严格贴合父容器尺寸；关键在于确保父容器具有明确高度、子元素脱离文档流并覆盖全区域。

通过 css 的 `object-fit` 配合绝对定位与明确的宽高继承，可使图片完全贴合父容器尺寸；关键在于确保父容器具有明确高度、子元素脱离文档流并覆盖全区域。

要让一张图片精确填满其父

的整个宽度和高度（即实现“背景图式”覆盖效果），仅设置 width: 100%; height: 100% 是不够的——因为默认情况下， 元素会保留原始宽高比，且父容器若未定义显式高度，height: 100% 将失效。

✅ 正确做法需满足三个前提：

1. 父容器必须有明确的高度（不能依赖内容撑开）；
2. 图片需使用 position: absolute 脱离文档流，并用 top: 0; left: 0; width: 100%; height: 100% 锚定至父容器四边；
3. 使用 object-fit: cover（裁剪缩放）或 object-fit: fill（拉伸变形）控制图像填充方式。

以下是推荐的完整实现方案（含结构优化）：

<div class="container">
  <div class="left-section"></div>
  <div class="right-section">
    <img src="https://placehold.co/600?x-oss-process=image/resize,p_40" alt="Dashboard Image" class="dashboard-image"><div class="info-box">
      <h2>Customer Management</h2>
      <p>Manage all customers from individual customers to corporate or group customers.</p>
    </div>
  </div>
</div>

.container {
  display: flex;
  width: 100%;
  height: 75vh; /* ⚠️ 必须设置显式高度，如 vh / px / rem */
  background-color: #e6f7ff;
}

.left-section {
  width: 40%;
  background-color: #ffd6e0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-section {
  position: relative; /* 为绝对定位提供参照 */
  width: 60%;
  overflow: hidden;
  border: 2px solid #28a745;
}

.dashboard-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 推荐：保持比例并裁剪填满 */
  z-index: -1; /* 确保图片在内容下方 */
}

.info-box {
  position: relative; /* 或 absolute + z-index: 1，更灵活 */
  text-align: center;
  padding: 1.5rem;
  color: #333;
  z-index: 2;
}

? 注意事项：

• ❌ 避免对 .right-section 设置 display: flex 同时又让图片 position: absolute ——这会导致 align-items/justify-content 对绝对定位元素无效，且可能干扰布局逻辑；
• ✅ 若需居中文字层，建议将 .info-box 设为 position: absolute 并配合 top: 50%; left: 50%; transform: translate(-50%, -50%) 实现精准居中；
• ? object-fit: cover 会裁剪图像边缘以维持比例；若需无裁剪拉伸（不推荐），改用 object-fit: fill；若需等比内嵌留白，则用 object-fit: contain。

总结：图片全屏填充的本质是「容器可控 + 定位精准 + 缩放策略明确」。只要父容器高度确定、图片脱离流并锚定四边、再辅以合适的 object-fit，即可稳定实现响应式完美贴合。