如何在hover时为元素初始宽高增加固定像素（替代transform:scale）

要实现hover时元素宽高各增加4px，同时达到transform: scale()那样不影响相邻元素、且不缩放内容的效果，可以通过分离布局容器与视觉内容元素的方式实现，避免scale的比例缩放和内容缩放问题。

方案1：固定初始尺寸的元素 #

如果元素的初始宽高是已知固定值，直接用CSS的calc结合transform: translate调整即可：

<div class="zoom">
  <div class="zoom-content">示例内容</div>
</div>

.zoom {
  /* 设置元素初始固定尺寸，保持布局空间不变 */
  width: 200px;
  height: 150px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}

.zoom-content {
  width: 100%;
  height: 100%;
  transition: all .2s ease;
  background-color: #e0e0e0;
  padding: 10px;
  box-sizing: border-box;
}

.zoom:hover .zoom-content {
  /* 宽高各增加4px */
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  /* 向左向上偏移2px，抵消宽高增加带来的位移，不影响相邻元素 */
  transform: translate(-2px, -2px);
}

方案2：动态初始尺寸的元素 #

如果元素的初始宽高由内容决定（非固定值），用JS获取初始尺寸并设置CSS变量，再配合CSS实现效果：

<div class="zoom">
  <div class="zoom-content">动态内容，尺寸由内容决定</div>
</div>

.zoom {
  padding: 0;
  margin: 0 auto;
  position: relative;
}

.zoom-content {
  width: 100%;
  height: 100%;
  transition: all .2s ease;
  background-color: #e0e0e0;
  padding: 10px;
  box-sizing: border-box;
}

.zoom:hover .zoom-content {
  /* 使用CSS变量计算宽高增量 */
  width: calc(var(--initial-width) + 4px);
  height: calc(var(--initial-height) + 4px);
  transform: translate(-2px, -2px);
}

// 页面加载完成后获取元素初始尺寸
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.zoom').forEach(container => {
    const content = container.querySelector('.zoom-content');
    const rect = content.getBoundingClientRect();
    // 设置CSS变量存储初始宽高
    container.style.setProperty('--initial-width', `${rect.width}px`);
    container.style.setProperty('--initial-height', `${rect.height}px`);
  });
});

为什么不用transform: scale？ #

• scale是按比例缩放，不同初始尺寸的元素hover时增加的像素值不一致，无法满足固定增加4px的需求；
• scale会连带缩放元素内的所有内容（文字、图标等），不符合“仅放大元素尺寸，保持内容大小”的要求；
• 虽然scale不影响布局，但上述方案通过分离布局容器和视觉内容，既保留了布局不被影响的特性，又实现了固定像素增量的精确控制。

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