如何在指定样式的居中div周围动态填充剩余屏幕空间？

当然可以实现这个需求！我来给你两种解决方案，分别应对已知图片宽高比和未知宽高比的情况：

你现有的红色div样式已经能完美实现居中且保持宽高比的效果，我们只需要在它周围添加四个填充div，通过绝对定位让它们精准占据屏幕剩余的上下左右空间。

方案一：已知图片宽高比（纯CSS静态实现） #

如果你的透明图片宽高比固定（比如16:9、4:3），直接用CSS就能完成所有布局：

HTML结构 #

<div class="container">
  <div class="red-box">
    <img src="你的透明图片路径.png" alt="透明图片">
  </div>
  <!-- 四个填充div -->
  <div class="fill-area top"></div>
  <div class="fill-area bottom"></div>
  <div class="fill-area left"></div>
  <div class="fill-area right"></div>
</div>

CSS样式 #

/* 父容器必须设为相对定位，作为绝对定位元素的参考 */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

/* 你的红色div原有样式，保持不变 */
.red-box {
  position: absolute;
  height: 80%;
  width: auto;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /* 可选：加个红色边框方便调试 */
  border: 2px solid red;
}

.red-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 填充区域通用样式 */
.fill-area {
  position: absolute;
  background: #ccc; /* 自定义填充背景色 */
}

/* 顶部填充：从屏幕顶到红色div顶部 */
.top {
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(50% + 40%); /* 50%是top基准，减去translate的40%，对应红色div顶部位置 */
}

/* 底部填充：从红色div底部到屏幕底 */
.bottom {
  top: calc(50% + 40%);
  left: 0;
  right: 0;
  bottom: 0;
}

/* 左侧填充：假设图片宽高比为16:9，计算红色div的半宽 */
.left {
  top: calc(50% - 40%);
  left: 0;
  right: calc(50% + (80% * 16 / 9) / 2);
  bottom: calc(50% - 40%);
}

/* 右侧填充：同理计算位置 */
.right {
  top: calc(50% - 40%);
  left: calc(50% + (80% * 16 / 9) / 2);
  right: 0;
  bottom: calc(50% - 40%);
}

方案二：未知图片宽高比（JS动态计算） #

如果不知道图片宽高比，或者图片会动态变化，我们可以用JS获取图片加载后的实际宽高比，再动态调整填充区域的位置：

HTML结构 #

和方案一完全一致，无需修改。

CSS样式 #

仅需调整左右填充区域的样式，去掉固定的宽高比计算：

/* 左右填充先不设置左右边界，由JS动态计算 */
.left, .right {
  top: calc(50% - 40%);
  bottom: calc(50% - 40%);
}

JavaScript代码 #

const redBox = document.querySelector('.red-box');
const img = redBox.querySelector('img');

// 等待图片加载完成后再计算，避免获取不到正确宽高
img.addEventListener('load', function() {
  // 获取图片实际宽高比
  const aspectRatio = img.width / img.height;
  // 计算红色div的半宽（高度80% × 宽高比 ÷ 2）
  const halfBoxWidth = (80 * aspectRatio) / 2;

  // 动态设置左右填充区域的边界
  document.querySelector('.fill-area.left').style.right = `calc(50% + ${halfBoxWidth}%)`;
  document.querySelector('.fill-area.right').style.left = `calc(50% + ${halfBoxWidth}%)`;
});

注意事项 #

• 父容器必须设置position: relative，否则绝对定位元素会相对于整个文档定位，导致布局错乱。
• 若图片来自外部链接，需确保图片加载完成后再执行JS计算，否则可能获取不到正确的宽高数据。
• 填充区域的背景色、阴影等样式可完全自定义，示例中的灰色仅作占位参考。

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