当我缩放时，如何保持容器内的元素填充父容器

Question

当我更改scrollarea中元素的比例时，scrollarea内的元素如何保持靠近父容器的顶部，底部，左侧和右侧enter image description here

function changeScale (f) {
    let cc = document.getElementById("cc")
    let n = cc.style.transform.length > 0 ? Number(cc.style.transform.substring(6,cc.style.transform.length-1)) : 1
    if (f === 'zoomIn') {
        n += 0.05
    } else if (f === 'zoomOut') {
        n -= 0.05
    } else if (f === 'restore') {
        n = 1
    } else {
        n = f
    }
    cc.style.transform = "scale(" + n + ")"
}

<div style="position: absolute;left: 50px;top: 50px;">
    <button onclick="changeScale('zoomIn')" style="float:left;">zoomIn</button>
    <button onclick="changeScale('zoomOut')" style="float:left;">zoomOut</button>
    <button onclick="changeScale('restore')" style="float:left;">restore</button>
</div>
<div id=app>
    <div id="el" style="width: 400px;height:400px;margin: 200px auto;border:1px solid blue;overflow:auto;">
        <div id="cc" style="width:800px;height:800px;border:2px solid red;z-index:10">
        </div>
    </div>
</div>

enter link description here

Answer 1

您可以将transform-origin值更改为：top left。这是一个工作示例：

function changeScale (f) {
    let cc = document.getElementById("cc")
    let n = cc.style.transform.length > 0 ? Number(cc.style.transform.substring(6,cc.style.transform.length-1)) : 1
    if (f === 'zoomIn') {
        n += 0.05
    } else if (f === 'zoomOut') {
        n -= 0.05
    } else if (f === 'restore') {
        n = 1
    } else {
        n = f
    }
    cc.style.transform = "scale(" + n + ")"
}

<div style="position: absolute;left: 50px;top: 50px;">
    <button onclick="changeScale('zoomIn')" style="float:left;">zoomIn</button>
    <button onclick="changeScale('zoomOut')" style="float:left;">zoomOut</button>
    <button onclick="changeScale('restore')" style="float:left;">restore</button>
</div>
<div id=app>
    <div id="el" style="width: 400px;height:400px;margin: 200px auto;border:1px solid blue;overflow:auto;">
        <div id="cc" style="width:800px;height:800px;border:2px solid red;z-index:10;transform-origin: left top;">
        </div>
    </div>
</div>