如何缩放以便容器也能长大并占用空间 [英] How to scale so that container also grows and takes up space

问题描述

因此，我有一个容器可以上下放大（放大和缩小），但也可以使用扩展/收缩的形式来占用空间，而不是重叠其他东西。

更新

有一张图片，其中绝对放置在坐标中的div，它们必须在上下调整大小时保留它们的相对位置（因此为什么我要使用scale）。

  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}）`;}  

< pre class =snippet-code-css lang-css prettyprint-override> #outer {overflow-x：auto position：relative; transform-origin：left top;}。pointer {width：20px; height：20px;背景颜色：橙色; position：absolute;}＃a1 {top：50px; left：150px;}＃a2 {top：150px; left：50px;}＃a3 {top：250px; left：550px;}

< div> < button onclick =increase（）>增加< /按钮> < button onclick =decrease（）>减少< /按钮>< / div>< div id = outer> < img src =http://via.placeholder.com/600x350/> < div id =a1class ='pointer'> < / DIV> < div id =a2class ='pointer'> < / DIV> < div id =a3class ='pointer'> < / DIV>< / DIV>< DIV>请勿覆盖我< / div>

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

解决方案

CSS3 scale 转换工作就像那样。不幸的是，缩放会与其他元素重叠，因为它通过创建一个新的堆叠上下文来将容器的内容从流中移出（基本上把它的所有内容定位在相对的 - 查看相关文档说明：

如果该属性的值不是none，则堆叠上下文
将被创建。

来源： MDN

查看下面的示例，通过蛮力对所有元素进行缩放：

var b，scale = 1，offset，pointers; window.onload = function（）{ b = document.getElementById（outer）; offset = b.getBoundingClientRect（）;指针= 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（）;}函数scaleIt（）{b.style.width = scale * offset.width +'px'; b.style.height = scale * offset.height +'px'; Array.prototype.forEach.call（指针，函数（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; * /位置：相对; transform-origin：left top;}。pointer {width：20px; height：20px;背景颜色：橙色; 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（）>增加< /按钮> < button onclick =decrease（）>减少< /按钮>< / div>< div id = outer> < img src =http://via.placeholder.com/600x350/> < div id =a1class ='pointer'> < / DIV> < div id =a2class ='pointer'> < / DIV> < div id =a3class ='pointer'> < / DIV>< / DIV>< DIV>请勿覆盖我< / div>

So I have a container that I want to scale up and down (zoom in and out) but to also have its expanded/shrunk form to take up space rather than just overlapping other stuff.

Update

There is an image with which there are absolute divs that are placed in coordinates, they must retain their relative positions when sizing up and down (hence why I'm using scale).

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>

Would rather not have third party libraries (beside jQuery) but may consider.

解决方案

CSS3 scale transitions work like that. Unfortunately, scaling would overlap other elements as it takes the contents of the container out of the flow by creating a new stacking context (essentially putting all its contents positioned relative to the container) - see the relevant doc description:

If the property has a value different than none, a stacking context will be created.

Source: MDN

See a demo below scaling all the elements by brute force:

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>

这篇关于如何缩放以便容器也能长大并占用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！