CSS：transform: scale后消除空白并重新对齐内容的极简方案

一、transform前的布局 #

CSS代码 #

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

HTML代码 #

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

二、使用transform: scale后的效果 #

CSS代码 #

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
  transform: scale(0.5);
  transform-origin: top left;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

HTML代码 #

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

三、期望达到的效果（硬写宽高示例，非解决方案） #

CSS代码 #

.element1 {
  height: 50px;
  width: 50px;
  background-color: red;
  transform-origin: top left;
}

.element2 {
  height: 100px;
  width: 100px;
  background-color: yellow;
}

HTML代码 #

<div class="page">
  <div class="element1"></div>
  <div class="element2"></div>
</div>

问题描述 #

目前我仅能找到非常复杂或十分“取巧（hacky）”的方案来解决这个问题：我的网站是动态的，会添加更多内容，希望内容仍能整齐对齐。许多解决方案需要计算高度，但这种方法在添加更多元素时容易失效，请问是否有极简的方法能在transform后让元素保持对齐？

解决方案 #

方案1：使用zoom属性（极简但非标准） #

如果不需要严格兼容所有浏览器（Chrome、Edge、Safari均支持），zoom是最极简的选择——它会同时缩放元素的视觉效果和布局空间，无需额外计算：

.element1 {
  height: 100px;
  width: 100px;
  background-color: red;
  zoom: 0.5; /* 直接设置缩放比例，布局和视觉同步缩放 */
}

方案2：CSS变量+calc抵消布局空间（标准兼容） #

如果需要严格遵循标准CSS，可通过CSS变量定义缩放比例，配合calc自动计算margin抵消transform: scale留下的多余布局空间，无需手动计算数值：

.element1 {
  --scale: 0.5; /* 只需修改这个比例值 */
  --original-size: 100px;
  
  height: var(--original-size);
  width: var(--original-size);
  background-color: red;
  transform: scale(var(--scale));
  transform-origin: top left;
  /* 自动计算负margin抵消多余垂直空间 */
  margin-bottom: calc(var(--original-size) * (var(--scale) - 1));
}

如果元素是横向排列，将margin-bottom替换为margin-right即可。

方案3：容器包裹+缩放容器（适配动态内容） #

如果元素内部有动态高度的内容，可将其包裹在容器中，通过容器的属性配合缩放，同时用CSS变量统一控制：

.scale-container {
  --scale: 0.5;
  transform: scale(var(--scale));
  transform-origin: top left;
  display: inline-block;
  max-height: calc(100% / var(--scale));
  overflow: hidden;
}
.element1 {
  height: auto; /* 动态高度 */
  width: 100px;
  background-color: red;
}

<div class="page">
  <div class="scale-container">
    <div class="element1">动态内容</div>
  </div>
  <div class="element2"></div>
</div>

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