Итак, у меня есть контейнер, который я хочу масштабировать вверх и вниз (увеличение и уменьшение), но также иметь расширенную/сжатую форму, чтобы занимать место, а не просто перекрывать другие вещи.
Update
Есть изображение, в котором есть absolute
divs, которые помещаются в координаты, они должны сохранять свои относительные позиции при определении размеров вверх и вниз (следовательно, почему я использую масштаб).
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>