Javascript 如何强制收缩div标记内子元素的溢出

我有下面的HTML代码

<div id="ImageWrapper" class="grid_col-xs">

  <div id="parentID" style="background-image: url(img/retailshop.jpg);background-size:100%;width: 100%;height: 0;padding-top: 66.64%;" ></div>                              

  <script type="text/javascript">
        drawOverlayHeatmap('parentID');
  </script>

</div>

我如何强制设置dic标签，使其内部的其他组件不会溢出

编辑：我尝试使用

溢出：自动
和
隐藏
。但我不想失去溢出区。我希望该区域在我的
parentID
div标签上收缩并fir

我正在使用绘制图像上方的热图。我已将图像作为我的背景放在div标记中
 更改
溢出：自动
to
overflow:hidden
你现在不清楚你在追求什么-你想隐藏div的溢出，但允许吗？没有任何意义sense@Pete我不想隐瞒任何事情。我想缩小，这是一个太广泛的问题，这个网站。但您需要做的是计算溢出量，然后使用transform scale或zoom将内容缩小到所需的数量。根据您的编辑，您还需要更新其余的代码，这样我们就可以得到一个可用的代码片段，否则就无法帮您更改
overflow:auto
to
overflow:hidden
你现在不清楚你在追求什么-你想隐藏div的溢出，但允许吗？没有任何意义sense@Pete我不想隐瞒任何事情。我想缩小，这是一个太广泛的问题，这个网站。但您需要做的是计算溢出量，然后使用transform scale或zoom将内容缩小到所需的数量。根据您的编辑，您还需要更新其余的代码，这样我们就可以得到一个可用的代码片段，否则将无法帮到您
<script type="text/javascript">
        var X = new Array(10, 10, 10, 30, 10, 30, 10, 20, 30, 40, 50, 60, 70, 80, 50, 60, 70, 80);
        var Y = new Array(10, 30, 10, 50, 10, 50, 30, 20, 10, 20, 10, 10, 10, 100, 10, 10, 10, 100);
        var C = new Array(5, 10, 7, 20, 5, 20, 5, 10, 7, 20, 5, 20, 5, 10, 7, 20, 5, 20);
        var computeRelativePosition = (point, relativeTo) => {
            return (point / 100) * relativeTo;
        };

        function drawOverlayHeatmap(elementName){

            var heatmap = h337.create({
                container: document.getElementById(elementName),
                // a waterdrop gradient ;-)
                // gradient: { .1: 'rgba(0,0,0,0)', 0.25: "rgba(0,0,90, .6)", .6: "blue", .9: "cyan", .95: 'rgba(255,255,255,.4)' },
                maxOpacity: .6,
                radius: 10,
                blur: .90
            });

            var width = (window.getComputedStyle(document.getElementById(elementName)).width.replace(/px/, ''));
            var height = (window.getComputedStyle(document.getElementById(elementName)).height.replace(/px/, ''));
            console.log(height);

            var generate = function (iterator) {

                var x = (computeRelativePosition(X[iterator], width)) >> 0;
                var y = (computeRelativePosition(Y[iterator], height)) >> 0;
                var c = (C[iterator] * 100) >> 0;

                // add the datapoint to heatmap instance
                heatmap.addData({ x: x, y: y, value: c, radius: 50 });
            };
            for (i = 0; i < X.length; i++) {
                generate(i);
            }
        }
    </script>