一开始我想对我的英语说抱歉 - 我正在努力做到最好 ;)
这是我设法创建的:
我想做的是使用 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 中会有更多不同的内容。div是使用 jquery 按写入值.resizeratio
缩放的按钮。.elements
我能够通过使用代码成功缩放元素并通过 js 保持所有子元素的位置:
css({
transform: "scale("+scale+")"
});
不幸的是,缩放后 div 确实保持原来的位置。正如我设法注意到的那样,div 本身已缩放,但它不会以某种方式改变位置,就像缩小元素后的空白空间被额外的边距填充一样。如何防止这种情况?
这是一个快速修复
只需在周围添加一个 div(例如.wrap
).elements
并根据这样的比例更改其宽度和高度。
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;
}
您可以使用 css 属性缩放,但这在 Firefox 中不起作用。
另一种解决方案是使用负左右边距。
如果这不起作用,您应该查看 flexbox 属性。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/