如何不使用transform:scale()实现背景图缩放效果？

transform: scale() 属于 CSS 合成属性，仅在视觉层面对元素进行缩放，不会触发页面重排（Reflow），因此元素的实际布局属性（包括offsetWidth、clientWidth、getBoundingClientRect()返回值等）都不会跟随缩放变化。而 Chartist.js 初始化时会读取容器的实际布局宽高来计算画布尺寸，拿到的始终是缩放前的数值，就会出现宽高识别异常的问题。

方案1：修改容器实际宽高（全浏览器兼容，最稳定） #

直接调整背景容器的宽高实现放大效果，会触发正常重排，布局属性会同步更新，Chartist.js 可以读取到正确的尺寸。
示例代码如下：

<!-- 页面结构 -->
<div class="bg-container">
  <button id="zoom-btn">点击放大</button>
  <div class="chart-container" style="display: none;"></div>
</div>

/* 样式部分 */
.bg-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: url('你的背景图路径') center/cover no-repeat;
  transition: all 0.3s ease;
}
/* 放大状态类 */
.bg-container.zoomed {
  width: 200vw;
  height: 200vh;
  /* 实现中心放大的定位调整 */
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100vw;
  margin-top: -100vh;
}
#zoom-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.chart-container {
  width: 600px;
  height: 400px;
  margin: 50px auto;
}

// 交互逻辑
const zoomBtn = document.getElementById('zoom-btn')
const bgContainer = document.querySelector('.bg-container')
const chartContainer = document.querySelector('.chart-container')

zoomBtn.addEventListener('click', () => {
  bgContainer.classList.add('zoomed')
  // 等待过渡动画完成后再初始化图表，确保读取到最新的容器尺寸
  setTimeout(() => {
    chartContainer.style.display = 'block'
    // 此处写入你的Chartist.js初始化逻辑
    new Chartist.Line('.chart-container', {
      labels: ['周一', '周二', '周三', '周四', '周五'],
      series: [[12, 9, 7, 8, 5]]
    })
  }, 300) // 时长和CSS中定义的过渡时长保持一致
})

方案2：使用CSS zoom属性（代码最简） #

zoom属性会直接修改元素的实际布局尺寸，所有布局属性会同步更新，不需要改动太多原有逻辑。
示例代码：

.bg-container.zoomed {
  zoom: 2; /* 数值对应你之前scale的缩放比例 */
  /* 如需中心放大，可配合定位调整偏移量 */
  position: fixed;
  top: -50vh;
  left: -50vw;
}

注意事项：zoom的过渡动画在Safari浏览器下兼容性一般，如果你不需要放大的过渡动画，该方案是最优选择。

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