Remove white space after Scale

Question

I have a little problem with scale transformation. I wish resize element, but when I do, my old size occupies the space, and the next element undergoes this old size. How to remove this constraints ?

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/

Thank you for your response.

Here is related question http://stackoverflow.com/questions/16385578/white-space-around-css3-scale This sould fix your problem. — NiKoLaPrO, Dec 23 '15 at 13:13
As the two guys above posted, there are some threads about this topic, but even if you get it to work i am not pretty sure about browser compatibility... wouldn't it be an alternative for you using jquery for it? — Marcel Wasilewski, Dec 23 '15 at 13:29
It's not clear what you're asking but `transform` is a purely **visual** effect. It does not affect element layout or *actual* sizing. — Paulie_D, Dec 23 '15 at 14:33
I answered this question [here](https://stackoverflow.com/questions/16385578/white-space-around-css3-scale) — Christian Vincenzo Traina, Sep 04 '17 at 21:03

wolfitoXtreme · Accepted Answer · 2015-12-23T15:24:52.140

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>

That's that CSS transformations actually do, it doesn't affect the surrounding elements, you can try to wrap the DIVs inside another element and apply the scaling to that element, but it will not affect other elements outside, just the contents, other than that, you will have to manipulate the actual sizes from your DIVs via java Script or a js library such as jQuery.

score -3 · Answer 2 · answered Dec 23 '15 at 13:35

-3

You try this code i hope work for you :

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

answered Dec 23 '15 at 13:35

Banti Mathur

41
1
5

2

I think you've completely missed the point of the question. Also what is the point of `scale(1)` as that is your original object – Pete Dec 23 '15 at 13:48

Remove white space after Scale

2 Answers2

Linked