How to scale so that container also grows and takes up space

Question

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.

kukkuz · Accepted Answer · 2017-09-15T00:15:32.930

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>

The pointers (the yellow boxes) aren't scaling proportionally :\. I'm currently working around this simply by just readjusting the height as I go. — A. L, Sep 14 '17 at 21:22
@A.Lau I'd to add an *onload* to fix the height issue... pls check it now, thanks! — kukkuz, Sep 15 '17 at 00:16
that sets the `left` and `top` of the *pointers* so that their positions also *scale* along... — kukkuz, Sep 15 '17 at 00:22
I think all I did was reduce width/height just so the other elements would automatically follow since scale does maintain their relative positions. — A. L, Sep 15 '17 at 00:26
What a poor hacky solution to a problem, this should not be used in any context — sahbeewah, Sep 16 '17 at 06:14

score 6 · Answer 2 · answered Sep 11 '17 at 11:56

I tried it with the width and height, i think that will works the same way as you want, add a small animation and you can use it.

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>

Sorry I think I should update my fiddle since it doesn't accurately reflect my current problem. I have an image and a set of smaller divs which act as pointers onto the image, so I need them to retain their relative position. I'll update now — A. L, Sep 11 '17 at 12:45

sahbeewah · Answer 3 · 2017-09-15T02:03:13.743

Edit: sorry rushed it, I meant update the container

You can, add a container. Store the initial size of this container. Now when you scale in the inner element, update the container width/height to the same ratio.

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>

you do realise that you've covered the text right? Which shouldn't happen. — A. L, Sep 14 '17 at 10:37

LightBender · Answer 4 · 2017-09-15T12:54:59.333

If your use case is as simple as your example, I think you may be over-complicating things. If you need your child elements to maintain their relative position to the parent, you just need to define their locations using relative units rather than absolute units and let the CSS rendering engine do its thing.

Here I've set the width of the parent (rather than the scale), have the image auto sizing withing to container to set its height, and have used percentages rather than pixels.

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>

score 3 · Answer 5 · answered Sep 19 '17 at 04:08

Best idea is to use dynamic percent (%) height, width and positions for every child element.

We just divide all pixel values with width or height as required and in JS simple change the width of parent container and watch the magic happen ;)

Please find the code below, appropriate comments added where values changed.

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>

P.S. to show marker as box we set its width as padding top (which when set as a percentage is relative to parent width) so it always shows as a square. ;)

This, in my opinion, is far more manageable as you don't have to process each element in JS.

Lee Comstock · Answer 6 · 2017-09-11T12:07:36.927

I would use other attributes than scale, that unlike scale affect the flow. You could change the div's height, width, margin, padding, font-size etc.

Edit: If you really want to use scale to change the size of everything inside the element in a uniform way, you could have an outer element which you change width and height of, and an inner element that you change scale on to match the outer elements width and height. The outer element will affect the flow of the content. But I don't really think this is desirable as it's not going to look that nice anyway if you just scale up all eventual icons and text inside the container, you probably want to keep a lot of elements inside the container at the same size regardless of the container's size.

How to scale so that container also grows and takes up space

Update

6 Answers6

Linked