使用变换后的 Div 行内块显示和正确位置：比例答案

【问题标题】：Div inline-block display and proper position after using transform: scale使用变换后的 Div 行内块显示和正确位置：比例
【发布时间】：2018-11-04 13:56:42
【问题描述】：

一开始我想对我的英语说声抱歉 - 我正在努力做到最好;)

这是我设法创建的：

JSFiddle

我想要做的是通过使用 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>

元素的数量是可变的，并且很可能在“.elements” div 中会有更多不同的内容。 .resizeratio div 是使用 jquery 按写入值缩放 .elements 的按钮。

我能够通过使用代码成功地缩放元素并通过js保持所有子元素的位置：

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

不幸的是，缩放后 div 确实保持原始位置。正如我设法注意到的那样，div 本身被缩放，但它不会改变位置，就像缩小元素后的空白空间被额外的边距填充一样。如何预防？

【问题讨论】：

标签： jquery css scale css-transforms display

【解决方案1】：

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

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

如果这不起作用，您应该查看 flexbox 属性。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【解决方案2】：

这里有一个快速解决方法

JSFiddle

只需在 .elements 周围添加一个 div（例如 .wrap），然后像这样根据比例更改其宽度和高度。

el.parent('.wrap').css({
  width: (350 * scale) + "px",
  height: (500 * scale) + "px"
});

.wrap {
  width: 350px;
  height: 500px;
  display: inline-block;
  position: relative;
}

.elements {
  width: 340px;
  height: 490px;
  background-repeat: no-repeat;
  margin: 5px;
  -moz-transform-origin: 0 0;
  transform-origin: 0 0;
}

【讨论】：