White space around css3 scale

css transform: translate remove space
css transform: scale to fit
css scale
css proportional scaling
transform: scale not working in safari
transform-origin
how to remove white space in css
css-tricks scale

I have a small issue I want to fix, but can't find any good answer :

When I use a scale on a div (which contains other divs), it leave white space around, from the "original" width and height of my div :

How can I remove the withe space around the div while scaled ?

I can use js if needed !

EDIT: Here is some code :

HTML

<div class="pull-right nextpack">

                    <div class="quarter scale-thumb">

                        <div class="up">
                            <div class="inner" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="face">
                            <div class="top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            <div class="bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                        </div>

                        <div class="cote-droit">
                            <div class="inner">
                                <div class="cote-droit-top" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                                <div class="cote-droit-bot" style="background-image: url({{URL::base().'/galery/th293x711/'.$nextpack->src}})"></div>
                            </div>
                        </div>

                    </div>


                </div>

CSS (you really don't need to know how the pack is done, it's a lot of css3 for nothing, basically just skew, rotate, scale to make a 3D render from a flat template)

.quarter.scale-thumb
{
-webkit-transform: scale(0.2);
-moz-transform: scale(0.2);
-o-transform: scale(0.2);
transform: scale(0.2);
}

PS : The first pic is when I don't add the scale-thumb class

solution is to wrap the element inside a container, and resize it too while the scale() is done

Jsfiddle demo: http://jsfiddle.net/2KxSJ/

relevant code is:

#wrap
{
    background:yellow;
    height:66px;
    width:55px;
    padding:10px;
    float:left;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}

#wrap:hover
{
    height:300px;
    width:260px;
}

.quarter
{
    padding:20px;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    background:red;
    width:250px;
    -webkit-transform-origin:left top;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    /* more transition here */
}


#wrap:hover .quarter
{
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    /* more transform-origin */
}

White space around css3 scale - css - html, CSS Transforms - White Space around <div>'s when css transforms applied - I can't remove the white space! Firstly here's the problem in  Mmm, I haven't worked it out yet, but It's interesting that changing .flip-block-container to display: block get's rid of the white space, but then your block is obviously going vertically. Darren Kynaston

how transform works is:

  1. your element gets rendered
  2. your element gets transformed (moved, rotated, scaled)
  3. other elements stay where they got rendered - around the "original element"

so the white space is really just the way the element was rendered in the first place.

You should use width and height in CSS if you want to render the size of elements differently and have the surrounding elements respond to it.

Or you could use something like javascript to resize things.

CSS Transforms, But scale() is just one of many transform functions that are available: 100px; transform: skew(20deg); font-size: 1px; padding: 1px; color: white; rotateX and rotateY will rotate an element in 3D space around those axises. White space around css3 scale (6 answers) Closed 4 years ago. I have a little problem with scale transformation. I wish resize element, but when I do, my old size

I encountered this problem and I solved it in this way, I used SCSS in order to don't repeat the same numbers along the code. The below code just moves the element right as the zoom decreases, in order to re-align it.

$originalWidth: 100px;
$rate: 0.5;

parent {
  width: $originalWidth;
}

parent > div {
  transform: scale(1);
}

parent:hover {
  width: $originalWidth*$rate;
}

parent:hover > div {
  transform: translateX(($originalWidth * ($rate - 1))/2) scale($rate); /* the order matters*/
}

You can get rid of SCSS just using CSS variables and calc(), if you prefer.

transform, When you use that scrollbar you will get white-space on the right side… and, generally, everything will scale up and down automatically. have to move elements around so that they can still be read at a reasonable size. The CSS3 white-space property is actually a shorthand version for the text-space-collapse and text-wrap properties. The white-space property has the possible values of normal , pre , nowrap , pre

I resolved my problem like yours that way.

I have a main container and I want decrease it

my css: .grid-container.full { transform: scale(0.6); transform-origin: top center; }

but my container had the bigger margin bottom. then I do it:

$mainGrid = $('.grid-container.full') $mainGrid.css('height', $mainGrid.height() * .6);

White-space with browser resizing, Answer: Use the CSS display property. If you try to put an image inside a <div> element that has borders, you will see an extra white space (around 3px) at the  The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. Its result is a transform-function data type.

Another idea for white spaces when you transform objects

<div class="outer">
    <div class="inner">
        transformme
    </div>
</div>

css

.outer { overflow:hidden }
.inner {
    transform-origin:left top;
}

js

var rate = 0.5;
var outerheight = $('.inner').outerHeight()*rate;
$('.inner').css({ transform: "scale("+rate+")" });
$('.outer').css({ height: outerheight });

Also you can add other browser tags; -webkit-transform, -moz-transform, -o-transform

How to Remove White Space Under an Image Using CSS, CSS transforms allow you to dynamically manipulate the space in which If you scale it down, it shrinks towards the center, or else you rotate it around its center  Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes. nowrap Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source. pre Sequences of white space are preserved.

Manipulating content with CSS3 transforms · WebPlatform Docs, Remove spaces under transform:scale(1.5); so that the } Is just below. FCC doesn't like extra spaces. Make sure your using chrome or firefox. Finally, white-space: pre-line; will break lines where they break in code, but extra white space is still stripped. Interestingly, the final line break is not honored. As per the CSS 2.1 spec: “Lines are broken at preserved newline characters, and as necessary to fill line boxes.” so perhaps that makes sense.

CSS Transform scale problem - HTML-CSS, White space is the blank area around, inside, or between the elements of a design. to ensure that the integrity of its design isn't compromised at a small scale. On the web, tracking is controlled with the CSS property, letter-spacing, and can  The white-space property specifies how white-space inside an element is handled. Default value: normal: Inherited: yes: Animatable: no. Read about animatable: Version

Principles of Design: White Space – UX Engineer, A common use is to set max-width: 100%; height: auto; so large images don’t exceed their containers width. Another way is the use of object-fit property, this will fit image, without changing the proportionally.

Comments
  • Show some relevant code. Question is impossible to answer from a screenshot.
  • Is this more clear? The code is no big deal, it's really the scale and the white space around it that keeps me stuck :)
  • You could put it all inside another div which has overflow:hidden, then resize that div.
  • When I add this : .nextpack { overflow: hidden; display: block; -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2); } I still have white space around...
  • Adjust the transform-origin property, which centers a scaled box vertically and horizontally, by default. stackoverflow.com/q/43020800/3597276
  • his fiddle has dead links, here's an updated fork: jsfiddle.net/2KxSJ/243
  • Well, I can't do it with width and height because the elements I want to resize are not in percentage, and it's really complicated to make it so. How would you do it in js ?
  • I think the community benefits from reading an explanation as to why that worked, even if it is a small explanation. Not just "Here's my code".
  • I think it's self-explanatory, it just pushes the element right as the zoom decreases. I'll add some comment though
  • the transform-origin: top center option was the thing I was missing - my parent container was huge, and it decided to transform from the bottom up - so it created a ton of "white space".
  • I have no idea why, but this actually works amazingly in all browsers! How did you get to this?
  • Doesn't work, and if it did, it would be nice to know why.
  • I removed the outline:1px solid transparent and it still works for me. All I needed was the origin statements. Beforehand the -transform was scaling all the whitespace and centering the shrunken image so this answer helped me
  • This works, just tested and works in JavaScript also - just set the element style: .transformOrigin='left top'; .. after this just re-size the element's parent/wrapper by using .getBoundingClientRect().width .. (or height) respectively.