愿所有的美好和期待都能如约而至

缩放后删除空格

发布时间:  来源:互联网  作者:匿名  标签:css error Remove white space after Scale exception html IT资讯 scale transform 技术社  热度:37.5℃

本文介绍了缩放后删除空格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对比例转换有一点小问题。我希望调整元素的大小,但当我这样做时,我的旧大小占据了空间,而下一个元素经历了这个旧大小。如何删除此限制?

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

JSFdle:https://jsfiddle.net/c7d2s21y/

感谢您的回复。

推荐答案

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脚本或js库(如jQuery)操作div中的实际大小。

这篇关于缩放后删除空格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP