CODEWITHSUNDEEP
htmlcsstransform
Theodoros Chatzigiannakis
Theodoros Chatzigiannakis

Reputation: 29213

How can I scale a container to match its scaled (or otherwise transformed) content?

I have a <div>, inside of which some complicated content is rendered with a scale transform applied. My problem is that the <div> takes up the same space that it would have taken even if no transform was applied. I've made a jsFiddle snippet to illustrate what I mean.

I think I can understand why the behavior is like this, but is there any way to make it so that the container takes as much space as its content with scaling (and other transforms, if possible) applied?

I should note that explicitly setting the width and height of the <div> outside affects the contents of the scaled text (and this is not desired behavior in my case). Putting the scaled content in an <iframe> is something I'd like to avoid.

Upvotes: 5

Views: 222

Answers (2)

Bryson Gilbert
Bryson Gilbert

Reputation: 131

Without resorting to Javascript, there isn't any way to do this, I don't think. CSS transforms don't affect layout flow for elements near the transformed elements, they only change the coordinate system within that element; so children are affected, but not parents or siblings (MDN has some more detail on this).

There's a great answer here that might be a JS-based partial solution for you: https://stackoverflow.com/a/10913299/2524360

Upvotes: 1

DorianHuxley
DorianHuxley

Reputation: 662

I don't know if this answers your question, but it doesn't seem to accept 0 as a value. The browsers scales from 1, as in 100% to e.g. 4, or 400%.

transform:scale(1,4);

Upvotes: 0

Related Questions