Jquery 使用“变换：缩放”后的Div内联块显示和正确位置

一开始，我想为我的英语说声对不起——我正在尽力做到最好；）

以下是我设法创建的内容：

我试图做的是使用js缩放包含很少不同元素的div，但同时我确实希望保持内联块显示，因此在缩放更多（或更少，取决于缩放值）元素后，可以将其放在一行中

只有一个元素的Html如下所示：

<div class="containerofelements">
 <div class="resizeratio">1</div>
 <div class="resizeratio">0.75</div>
 <div class="resizeratio">0.5</div>
 <hr />
 <div class="elements" style="background-image: url(https://image.ibb.co/ha1wAo/back.png)">
   <div class="middle">middle</div>
   <div class="leftup">leftup</div>
   <div class="rightup"><img src="https://image.ibb.co/dK2BRT/profile_default_m.jpg" /></div>
   <div class="leftdown">leftdown</div>
   <div class="rightdown">rightdown</div>
 </div>
</div>

---

不幸的是，在缩放div之后，它确实保持了原始位置。正如我所注意到的，div本身是被缩放的，但它不知何故并没有改变位置，就像缩小元素后的空白被额外的边距填充一样。如何防止这种情况发生？

您可以使用css属性zoom，但这在Firefox中不起作用

另一个解决方案是使用负的左右边距

如果这不起作用，您应该看看flexbox属性。

---

这里有一个快速解决方案

只需在

.elements

周围添加一个div（例如

.wrap

），并根据比例更改其宽度和高度，如下所示

el.parent（'.wrap'）.css({
宽度：（350*刻度）+“像素”，
高度：（500*刻度）+“像素”
});

.wrap{
宽度：350px；
高度：500px；
显示：内联块；
位置：相对位置；
}
.要素{
宽度：340px；
高度：490px；
背景重复：无重复；
保证金：5px；
-moz变换原点：0；
变换原点：0；
}

css({
 transform: "scale("+scale+")"
});