如何缩放，使容器也增长和占用空间

所以我有一个容器，我想要扩大和缩小（放大和缩小），但也有扩大/缩小的forms占用空间，而不是重叠其他的东西。

更新

有一个图像，有absolute div放置在坐标，他们必须保持其上下相对位置（因此为什么我使用规模）。

 var b = document.getElementById("outer"); var scale = 1; function increase() { scale += 0.1 b.style.transform = `scale(${scale})`; } function decrease() { scale -= 0.1 b.style.transform = `scale(${scale})`; } 

 #outer { overflow-x: auto position: relative; transform-origin: left top; } .pointer { width: 20px; height: 20px; background-color: orange; position: absolute; } #a1 { top: 50px; left: 150px; } #a2 { top: 150px; left: 50px; } #a3 { top: 250px; left: 550px; } 

 <div> <button onclick="increase()">Increase</button> <button onclick="decrease()">Decrease</button> </div> <div id=outer> <img src="http://via.placeholder.com/600x350" /> <div id="a1" class='pointer'> </div> <div id="a2" class='pointer'> </div> <div id="a3" class='pointer'> </div> </div> <div> please don't cover me </div> 

宁可没有第三方库（除了jQuery），但可以考虑。

Answer 1

CSS3的scale转换工作就是这样 。 不幸的是，缩放会重叠其他元素，因为它通过创build新的堆栈上下文 （基本上将其所有内容相对于容器定位）将容器的内容从stream中取出 – 请参阅相关的文档说明：

如果该属性的值不是none，则会创build一个堆栈上下文。

来源： MDN

看到下面的演示通过蛮力缩放所有元素：

 var b, scale = 1, offset, pointers; window.onload = function() { b = document.getElementById("outer"); offset = b.getBoundingClientRect(); pointers = Array.prototype.map.call(b.querySelectorAll('.pointer'), function(e) { return { el: e, offset: e.getBoundingClientRect() } }); } function increase() { scale += 0.1; scaleIt(); } function decrease() { scale -= 0.1; scaleIt(); } function scaleIt() { b.style.width = scale * offset.width + 'px'; b.style.height = scale * offset.height + 'px'; Array.prototype.forEach.call(pointers, function(e) { e.el.style.width = scale * e.offset.width + 'px'; e.el.style.height = scale * e.offset.height + 'px'; e.el.style.top = scale * e.offset.top + 'px'; e.el.style.left = scale * e.offset.left + 'px'; }); } 

 #outer { /*overflow-x: auto;*/ position: relative; transform-origin: left top; } .pointer { width: 20px; height: 20px; background-color: orange; position: absolute; } #outer > img { height: 100%; } #a1 { top: 50px; left: 150px; } #a2 { top: 150px; left: 50px; } #a3 { top: 250px; left: 550px; } 

 <div> <button onclick="increase()">Increase</button> <button onclick="decrease()">Decrease</button> </div> <div id=outer> <img src="http://via.placeholder.com/600x350" /> <div id="a1" class='pointer'> </div> <div id="a2" class='pointer'> </div> <div id="a3" class='pointer'> </div> </div> <div> please don't cover me </div> 

Answer 2

我试了宽度和高度，我认为这将以同样的方式，你想要的，添加一个小animation，你可以使用它。

 var b = document.getElementById("outer"); var b_width = document.getElementById("outer").offsetWidth; var b_height = document.getElementById("outer").offsetHeight; function increase() { b_width += 10 b_height += 10 b.style.width = b_width+"px"; b.style.height = b_height+"px"; } function decrease() { b_width -= 10 b_height -= 10 b.style.width = b_width+"px"; b.style.height = b_height+"px"; } 

 #outer { background-color: red; padding: 1em; height: 80px; width: 80px; transform-origin: left top; } #inner { background-color: yellow; height: 50px; width: 100%; } 

 <div> <button onclick="increase()">Increase</button> <button onclick="decrease()">Decrease</button> </div> <div id=outer> <div id=inner> </div> </div> <div> please don't cover me </div> 

Answer 3

编辑：对不起，冲了，我的意思是更新容器

你可以添加一个容器。 存储此容器的初始大小。 现在，当您在内部元素中缩放时， 请将容器宽度/高度更新为相同的比例。

 var a = document.getElementById("outer-wrapper"); var b = document.getElementById("outer"); var scale = 1; var aWidth = a.offsetWidth; var aHeight = a.offsetHeight; function increase() { scale += 0.1 b.style.transform = `scale(${scale})`; a.style.width = `${scale * aWidth}px`; a.style.height = `${scale * aHeight}px`; } function decrease() { scale -= 0.1 b.style.transform = `scale(${scale})`; a.style.width = `${scale * aWidth}px`; a.style.height = `${scale * aHeight}px`; } 

 #outer { position: relative; transform-origin: left top; } .pointer { width: 20px; height: 20px; background-color: orange; position: absolute; } #a1 { top: 50px; left: 150px; } #a2 { top: 150px; left: 50px; } #a3 { top: 250px; left: 550px; } 

 <div> <button onclick="increase()">Increase</button> <button onclick="decrease()">Decrease</button> </div> <div id="outer-wrapper"> <div id="outer"> <img src="http://via.placeholder.com/600x350" /> <div id="a1" class='pointer'> </div> <div id="a2" class='pointer'> </div> <div id="a3" class='pointer'> </div> </div> </div> <div> please don't cover me </div> 

Answer 4

如果你的用例和你的例子一样简单，我认为你可能过于复杂的东西。 如果您需要您的子元素保持与父元素的相对位置，则只需使用相对单位而不是绝对单位定义其位置，然后让CSS渲染引擎执行此操作。

在这里，我已经设置了父级的宽度（而不是比例），将图像自动resize以设置高度，并使用百分比而不是像素。

 var b = document.getElementById("outer"); var width = 600; function increase() { width = width * 1.1 b.style.width = width + 'px'; } function decrease() { width = width / 1.1 b.style.width = width + 'px'; } 

 #outer { position: relative; } #outer img { width: 100%; height: auto; } .pointer { width: 3.333%; height: 5.714%; background-color: orange; position: absolute; } #a1 { top: 8.333%; left: 14.285%; } #a2 { top: 42.857%; left: 8.333%; } #a3 { top: 71.428%; left: 91.667%; } 

 <div> <button onclick="increase()">Increase</button> <button onclick="decrease()">Decrease</button> </div> <div id=outer> <img src="http://via.placeholder.com/600x350" /> <div id="a1" class='pointer'> </div> <div id="a2" class='pointer'> </div> <div id="a3" class='pointer'> </div> </div> <div> please don't cover me </div> 

Answer 5

最好的办法是为每个子元素使用dynamic百分比（ % ）的高度，宽度和位置。

我们只是根据需要划分所有像素值的宽度或高度，在JS中简单地改变父容器的宽度，观看魔术的发生;）

请在下面find代码，在值更改处添加适当的注释。

 var b = document.getElementById("outer"); var scale = 1; function increase() { scale += 0.1 // Just change the width of parent b.style.width = 600 * scale + "px"; } function decrease() { scale -= 0.1 // Just change the width of parent b.style.width = 600 * scale + "px"; } 

 #outer { overflow-x: auto; position: relative; transform-origin: left top; width: 600px; /* Give div static width for children to position correctly */ } #outer img { width: 100%; /* Set image to stretch full width */ } .pointer { width: 3.33%; /* 20px/600px*100% */ padding-top: 3.33%;/* Don't use static height */ background-color: orange; position: absolute; } #a1 { top: 14.28%;/* 50px/350px*100% */ left: 25%;/* 150px/600px*100% */ } #a2 { top: 42.85%;/* 150px/350px*100% */ left: 8.33%;/* 50px/600px*100% */ } #a3 { top: 71.42%;/* 250px/350px*100% */ left: 91.66%; /* 550px/600px*100% */ } 

 <div> <button onclick="increase()">Increase</button> <button onclick="decrease()">Decrease</button> </div> <div id=outer> <img src="http://via.placeholder.com/600x350" /> <div id="a1" class='pointer'> </div> <div id="a2" class='pointer'> </div> <div id="a3" class='pointer'> </div> </div> <div> please don't cover me </div> 

Answer 6

我会使用比例的其他属性，不像比例尺度影响stream量。 您可以更改div的高度，宽度，边距，填充，字体大小等

编辑：如果你真的想要使用比例尺以一致的方式改变元素内的所有东西的大小，你可以有一个你改变宽度和高度的外部元素，以及一个你改变比例尺以匹配外部的内部元素元素的宽度和高度。 外部元素将影响内容的stream动。 但是我并不认为这是可取的，因为如果你只是放大容器中的所有最终图标和文本，它不会看起来那么好，你可能想在容器内保留大量元素容器的大小。