全屏div内保持宽高比的img如何添加仅环绕不覆盖的背景色？

嘿，这个需求我刚好有靠谱的实现思路！你提到用A、B、C、D、F、G、H、I这些辅助div来实现环绕图片的背景色，这个方向完全正确——核心就是让这些div精准填满图片周围的空白区域，同时绝对不覆盖图片本身，这样图片的透明部分就能正常显示背后的内容。

下面给你一套具体的实现方案，完全贴合你的需求：

步骤1：HTML结构（对应你提到的辅助div） #

我们把你说的8个div对应到顶部3个、左右各1个、底部3个，刚好覆盖所有可能的空白区域：

<div class="fullscreen-container">
  <!-- 顶部：A、B、C -->
  <div class="bg-section bg-top-left"></div>
  <div class="bg-section bg-top-center"></div>
  <div class="bg-section bg-top-right"></div>
  
  <!-- 左侧D、右侧F -->
  <div class="bg-section bg-left"></div>
  <div class="bg-section bg-right"></div>
  
  <!-- 底部：G、H、I -->
  <div class="bg-section bg-bottom-left"></div>
  <div class="bg-section bg-bottom-center"></div>
  <div class="bg-section bg-bottom-right"></div>
  
  <img src="your-image.png" alt="带透明通道的目标图片" class="responsive-img">
</div>

步骤2：基础CSS设置 #

先搞定全屏容器和图片的基础样式，确保图片能保持比例最大化显示：

.fullscreen-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* 这里设置的是图片背后的内容，比如渐变背景 */
  background: linear-gradient(45deg, #2c3e50, #3498db);
}

.responsive-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  /* 强制保持图片宽高比，不会拉伸变形 */
  object-fit: contain;
}

.bg-section {
  position: absolute;
  /* 这里设置你想要的环绕背景色 */
  background-color: #ff4444;
}

步骤3：JavaScript动态调整辅助div #

因为图片的实际显示尺寸会随窗口变化，我们需要用JS实时计算空白区域的大小，让辅助div精准填充：

const container = document.querySelector('.fullscreen-container');
const img = document.querySelector('.responsive-img');

// 等待图片加载完成再初始化，避免尺寸计算错误
img.onload = adjustBgSections;
// 窗口大小变化时重新调整布局
window.addEventListener('resize', adjustBgSections);

function adjustBgSections() {
  const containerRect = container.getBoundingClientRect();
  const imgRect = img.getBoundingClientRect();
  
  // 计算图片相对于容器的位置和尺寸
  const imgTop = imgRect.top - containerRect.top;
  const imgLeft = imgRect.left - containerRect.left;
  const imgWidth = imgRect.width;
  const imgHeight = imgRect.height;
  
  // 处理顶部三个div（A、B、C）
  const topSectionWidth = containerRect.width / 3;
  document.querySelector('.bg-top-left').style.cssText = `
    top: 0; left: 0; width: ${topSectionWidth}px; height: ${imgTop}px;
  `;
  document.querySelector('.bg-top-center').style.cssText = `
    top: 0; left: ${topSectionWidth}px; width: ${topSectionWidth}px; height: ${imgTop}px;
  `;
  document.querySelector('.bg-top-right').style.cssText = `
    top: 0; left: ${topSectionWidth * 2}px; width: ${containerRect.width - topSectionWidth * 2}px; height: ${imgTop}px;
  `;
  
  // 处理左侧D和右侧F
  document.querySelector('.bg-left').style.cssText = `
    top: ${imgTop}px; left: 0; width: ${imgLeft}px; height: ${imgHeight}px;
  `;
  document.querySelector('.bg-right').style.cssText = `
    top: ${imgTop}px; left: ${imgLeft + imgWidth}px; width: ${containerRect.width - imgLeft - imgWidth}px; height: ${imgHeight}px;
  `;
  
  // 处理底部三个div（G、H、I）
  const bottomSectionHeight = containerRect.height - imgTop - imgHeight;
  document.querySelector('.bg-bottom-left').style.cssText = `
    top: ${imgTop + imgHeight}px; left: 0; width: ${topSectionWidth}px; height: ${bottomSectionHeight}px;
  `;
  document.querySelector('.bg-bottom-center').style.cssText = `
    top: ${imgTop + imgHeight}px; left: ${topSectionWidth}px; width: ${topSectionWidth}px; height: ${bottomSectionHeight}px;
  `;
  document.querySelector('.bg-bottom-right').style.cssText = `
    top: ${imgTop + imgHeight}px; left: ${topSectionWidth * 2}px; width: ${containerRect.width - topSectionWidth * 2}px; height: ${bottomSectionHeight}px;
  `;
}

关键说明 #

1. 精准填充原理：通过getBoundingClientRect()获取容器和图片的实际尺寸与位置，动态计算每个辅助div的宽高和位置，确保它们只出现在图片周围的空白处，绝对不会覆盖图片。
2. 图片显示逻辑：用object-fit: contain+居中定位保证图片始终保持宽高比，且在容器内最大化显示。
3. 透明效果保留：辅助div只填充空白，图片的透明部分能直接看到容器的背景（也就是你说的“img背后的内容”）。

如果觉得拆分8个div太繁琐，也可以简化成顶部、底部、左侧、右侧4个div，代码会更简洁，效果是一样的~

内容的提问来源于stack exchange，提问作者Julien B.