css - 如何缩放缩放元素占用的空间

Question

全部:

我是 CSS 的新手，假设我在页面上为一个元素设置了缩放比例，结果该元素被缩放了，但它最初占用的空白空间仍然存在，我想知道我该如何做到这一点空间也缩放？如果CSS方式不行，有没有其他方法可以做到这一点(请不要告诉我改变大小并相应地向左移动DIV)？

<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>

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 来检索元素的大小、变换比例值和变换原点以设置适当的负边距或正边距