缩放后删除空格[重复]答案

【问题标题】：Remove white space after Scale [duplicate]缩放后删除空格[重复]
【发布时间】：2016-03-29 22:21:03
【问题描述】：

我对比例转换有点问题。我希望调整元素的大小，但是当我这样做时，我的旧尺寸会占据空间，并且下一个元素会经历这个旧尺寸。 如何消除这些限制？

HTML

<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>

<!-- Whitout Scale -->
<div></div>
<div></div>

CSS

div:nth-of-type(even) { background: blue; }
div:nth-of-type(odd) { background: red; }

div {
  width: 100px;
  height: 100px;
}

.scale {
  transform: scale(0.5);
  transform-origin: top left;
}

JSFiddle：https://jsfiddle.net/c7d2s21y/

感谢您的回复。

【问题讨论】：

这里是相关问题stackoverflow.com/questions/16385578/… 这可以解决您的问题。
正如上面两个人所发布的那样，有一些关于这个主题的主题，但即使你让它工作我也不太确定浏览器兼容性......它不是替代品吗？你用 jquery 吗？
不清楚你在问什么，但transform 是纯粹的视觉效果。它不会影响元素布局或实际大小。
我回答了这个问题here

标签： html css transform scale

【解决方案1】：

var scaleTo = 0.5,  
  itemWidth = $('.scaleB').width(),
  itemHeight = $('.scaleB').height()
;



function scaleThis(meausure) {
  
  var output = meausure * scaleTo;
      
      
  return output;
  
}

$('.scaleB').on({
  'mouseover': function(event) {
    
    $(this).css({
      'width' : scaleThis(itemWidth) + 'px',
      'height' : scaleThis(itemHeight) + 'px'
    });
    
  },
  'mouseout': function(event) {
    
    $(this).css({
      'width' : itemWidth + 'px',
      'height' : itemHeight + 'px'
    });
   }
  
});

.wrapper {
  background-color: #cccccc;
}
.wrapper:after {
  content: "normal";
}
.wrapperScale {
  background-color: #dddddd;
}
.wrapperScale:after {
  content: "wrapped";
}
.wrapper_jQuery:after {
  content: "jQuery";
}
.wrapper div:nth-of-type(even),
.wrapperScale div:nth-of-type(even) { 
  background: blue; 
}

.wrapper div:nth-of-type(odd),
.wrapperScale div:nth-of-type(odd) { 
  background: red; 
}

.scale, .wrapperScale div, .scaleB {
  width: 50px;
  height: 50px;
}

.scale:hover, .wrapperScale:hover {
  transform: scale(0.5);
  transform-origin: top left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrapper">
<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>
</div>

<!-- Whitout Scale -->
<div class="wrapper wrapperScale">
  <div></div>
  <div></div>
</div>

<!-- jQuery -->
<div class="wrapper wrapper_jQuery">
<div class="scaleB"></div>
<div class="scaleB"></div>
</div>

这就是 CSS 转换实际上所做的，它不会影响周围的元素，您可以尝试将 DIV 包装在另一个元素中并将缩放应用到该元素，但它不会影响外部的其他元素，只是内容，除此之外，您将不得不通过 java Script 或 jQuery 等 js 库从您的 DIV 中操作实际大小。

【讨论】：

【解决方案2】：

你试试这个代码我希望对你有用：

 <style>
 div:nth-of-type(even) { background: blue; }
 div:nth-of-type(odd) { background: red; }


 div {
 width: 100px;
 height: 100px;
 }

.scale {
 transform: scale(1);
transform-origin: top left;
}
</style>

【讨论】：

我认为您完全错过了问题的重点。还有scale(1) 的意义何在，因为那是您的原始对象