CSS如何在父div上设样式实现内部子div缩放且父元素尺寸不变

利用zoom属性对元素整体渲染内容的缩放特性，通过CSS计算反向抵消父元素自身的尺寸变化，即可在不修改任何子元素样式、不改变父元素实际占位/视觉尺寸的前提下，实现内部所有内容整体放大，超出部分自动被overflow: hidden裁剪。

核心实现代码 #

HTML结构：

<div class="red-box">
  <div class="blue-box"></div>
  <!-- 内部可放置任意数量子元素，无需为子元素添加任何缩放相关样式 -->
</div>

CSS样式：

.red-box {
  /* 自定义内部内容缩放比例，可根据需求调整 */
  --content-scale: 1.5;
  /* 红色div最终需要呈现的实际尺寸 */
  --box-size: 200px;

  width: var(--box-size);
  height: var(--box-size);
  background: red;
  overflow: hidden;
  /* 统一盒模型，避免padding、border干扰尺寸计算 */
  box-sizing: border-box;

  /* 核心缩放逻辑，全部设置在外层元素 */
  width: calc(var(--box-size) / var(--content-scale));
  height: calc(var(--box-size) / var(--content-scale));
  zoom: var(--content-scale);
}

/* 内部子元素无需添加任何缩放相关样式，按正常业务需求写即可 */
.blue-box {
  width: 100px;
  height: 100px;
  background: blue;
}

逻辑说明 #

• 所有缩放相关代码全部挂载在外层红色div上，内部子元素无需做任何适配，支持任意数量、任意类型的子内容
• 反向尺寸计算+zoom的组合，保证红色div最终的文档流占位尺寸、视觉呈现尺寸和未加缩放效果时完全一致，不会影响页面其他元素的布局
• 父元素自带的overflow: hidden规则正常生效，会自动裁剪子元素放大后超出父容器范围的内容
• 仅需修改--content-scale变量值即可快速调整放大倍数，维护成本极低

扩展：居中放大效果 #

如果需要内部子元素从容器中心向外放大（默认zoom以左上角为缩放原点），只需给外层红色div添加flex布局属性即可，无需调整其他逻辑：

.red-box {
  /* 其余原有样式保持不变 */
  display: flex;
  align-items: center;
  justify-content: center;
}

兼容性说明 #

zoom属性目前已适配Chrome、Edge、Safari全版本，Firefox从126版本开始正式原生支持，可覆盖95%以上的主流浏览器用户场景。

内容的提问来源于stack exchange，提问作者Ad S.S