Question

所有

我对CSS很新，比如说如果我将缩放设置为页面上的一个元素，事实证明该元素已缩放但它原来所用的空白仍然存在，我想知道我该如何制作空间缩放？如果CSS方式不起作用，有没有其他方法可以做到这一点（请不要告诉我改变大小并相应地左移DIV）？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div>
    <div id="toscale" style="transform: scale(0.5); transform-origin:top left; width:100px; height:100px; background-color:pink; float:left;">
      
      
    </div>
    <div style="width:100px; height:100px; background-color:lightblue; float:left;">
      
    </div>
<div>

＆＃13;

Answer 1

如果已知尺寸，则应该很容易：

transform:scale(0.5); /* /2 */
transform-origin:top left; /* bottom and right need to be minded to swallow the gap */
width:100px; /* /2 = 50px */
margin-right:-50px;
height:100px; /* /2 = 50px */
margin-bottom:-50px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<div>
  <div id="toscale" style="transform:scale(0.5); transform-origin:top left; width:100px;margin-right:-50px; margin-bottom:-50px;height:100px; background-color:pink; float:left;">


  </div>
  <div style="width:100px; height:100px; background-color:lightblue; float:left;">

  </div>
  <div>

否则将需要一个javascript来检索元素的大小，变换缩放值和transform-origin来设置正确的负边距或正边距

如何缩放缩放元素所占用的空间

1 个答案: