CODEWITHSUNDEEP
jqueryhtmlcss
Damkulul
Damkulul

Reputation: 1476

How to scale a div without scaling content

I have this div (id="myDiv"), when the div is under css - scale all it's children are under scale as well. I need the div to enlarge but not the children, in a "creative way" i tried 2 things which didn't work.. how to scale a div without scaling it's content ?

HTML

<div id="myDiv">
<h3>Song</h3>
<p>
Strawberry fields forever
</p>
<div>

jQuery

$("#myDiv").css("transform", "scale(2,3)");   
//I tried to...
$("#myDiv").children().css("transform", "scale(-2,-3)");
$("#myDiv").children().css("transform", "scale(0,0)");

Upvotes: 9

Views: 15827

Answers (3)

bowheart
bowheart

Reputation: 4676

Your math is just off, as Paulie_D said, also, if you don't want spacing issues, I'd wrap the contents of the div in another div and control that div's margin-top, e.g.

<div id="myDiv">
    <div>
        <h3>Song</h3>
        <p>
            Strawberry fields forever
        </p>
    </div>
</div>

Here's a fiddle

Upvotes: 0

Glogo
Glogo

Reputation: 2884

If you scale to 0, your content will hide and if you scale to negatie value, it will flip. Child elements will always inherit scale from its parent so setting scale for children to 1 wont help either.

If possible, I recommend you not to use scale, but try to adjust your parent size manualy. Otherwise you can try to scale your parent div, but position your children absolutely within it (being in the same container with parent myDiv)

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

You need to calculate backwards for the child elements.

For instance, you are scaling the div by 200% in the x axis...to reduce the children back to 100% you need to scale down to 50% (0.5)

Ditto for the y-axis 300%...therefore 33% (0.3)

CSS

.scaled { /* the parent */
    transform: scale(2,3);
    transform-origin:top left;
 }

.scaled * { /* the children */
   transform: scale(.5, .33); 
}

Jsfiddle Demo

NOTE: As you can see there are transform-origin issues as well and other spacing issues youl will need to address.

Upvotes: 9

Related Questions