Wie kann ich einen Container so skalieren, dass er seinem skalierten (oder anderweitig transformierten) Inhalt entspricht?

Question

Ich habe eine <div>, in der einige komplizierte Inhalte mit einer Maßstabsumwandlung angewendet wird. Mein Problem ist, dass das <div> den gleichen Platz einnimmt, den es genommen hätte, selbst wenn keine Transformation angewendet wurde. Ich habe eine jsFiddle snippet gemacht, um zu veranschaulichen, was ich meine.

I think I can understand why the behavior is like this, aber gibt es eine Möglichkeit, es so zu machen, dass der Container so viel Platz wie seinen Inhalt mit Skalierung (und andere Transformationen, wenn möglich) verwendet?

sollte ich beachten Sie, dass die width und height des <div> außen wirkt sich auf die Inhalte des skalierten Text explizit einstellen (und dieses Verhalten in meinem Fall nicht erwünscht ist). Den skalierten Inhalt in eine zu bringen, möchte ich vermeiden.

Answer 1

Ohne auf Javascript zurückgreifen, gibt es keine Möglichkeit, dies zu tun, denke ich nicht. CSS-Transformationen wirken sich nicht auf den Layoutfluss für Elemente in der Nähe der transformierten Elemente aus, sie ändern nur das Koordinatensystem in diesem Element. so sind Kinder betroffen, aber nicht Eltern oder Geschwister (MDN hat mehr Details dazu).

Es gibt eine große Antwort hier, dass eine JS-basierte Teillösung für Sie sein könnte: https://stackoverflow.com/a/10913299/2524360

Answer 2

Ich weiß nicht, ob dies Ihre Frage beantwortet, aber es scheint nicht 0 als Wert zu akzeptieren. Der Browser skaliert von 1, wie in 100% zu z.B. 4 oder 400%.

transform:scale(1,4);