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
nowrap. Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered.
The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.
white-space is a CSS property that helps control how whitespace and line breaks within an element's text are treated. The white-space property can take these values: normal : The default value. Multiple whitespaces are collapsed into one. The text wraps to the next line when needed.
how transform
works is:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With