时间戳

首页 > 解决方案 > 如何防止一个子元素缩放

javascript - 如何防止一个子元素缩放

问题描述

如何在缩放.container时防止缩放#chart？

我想在用户调整浏览器窗口大小时缩放除一个 div (#chart) 之外的所有内容 (.container)。对于这个 div，我从 apexcharts.js 导入了一个图表，但由于缩放了这个元素，它不能正常工作。所以我想省略缩放这个特定的 div 以适应所有可用空间（它是一个响应图表）。我不知道该怎么做...

window.addEventListener('resize', () => resizeWindow());

const resizeWindow = () => {
   const {innerWidth: width, innerHeight: height} = window;
  
   if(width < 768) {
      const scale = height/PANEL_HEIGHT;
      document.documentElement.style.setProperty(SCALE_PROPERTY, scale);

      return;
   }
   else {
   const scale = Math.min(width/PANEL_WIDTH, height/PANEL_HEIGHT);
   document.documentElement.style.setProperty(SCALE_PROPERTY, scale);
   }
}
:root {
   --scale-value: 1;
}
.panel {
   height: 1000px;
   width: 1600px;
   position: absolute;
   transform: scale(calc(var(--scale-value) * 0.9));
   transform-origin: center;
}
<div class="container">
  <div id="chart"></div>
</div>

标签： javascripthtmlcss

解决方案

推荐阅读