Come posso ridimensionare un contenitore in modo che corrisponda al suo contenuto ridimensionato (o altrimenti trasformato)?

Question

Ho uno <div>, all'interno del quale viene eseguito il rendering di alcuni contenuti complicati con una trasformazione di scala applicata. Il mio problema è che lo <div> occupa lo stesso spazio che avrebbe assunto anche se non fosse stata applicata alcuna trasformazione. Ho creato uno jsFiddle snippet per illustrare cosa intendo.

I think I can understand why the behavior is like this, ma c'è un modo per fare in modo che il contenitore richiede più spazio suo contenuto con scalatura (e altre trasformate, se possibile) applicata?

Vorrei sottolineare che l'impostazione in modo esplicito il width e height del <div> influenza al di fuori dei contenuti del testo in scala (e questo non è desiderato comportamento nel mio caso). Mettere il contenuto in scala in un è qualcosa che vorrei evitare.

Answer 1

Senza ricorrere a Javascript, non c'è modo di farlo, non credo. Le trasformazioni CSS non influenzano il flusso di layout per gli elementi vicino agli elementi trasformati, cambiano solo il sistema di coordinate all'interno di quell'elemento; quindi i bambini ne sono affetti, ma non i genitori oi fratelli (MDN ha qualche dettaglio in più su questo).

C'è una grande risposta qui che potrebbe essere una soluzione parziale JS-based per voi: https://stackoverflow.com/a/10913299/2524360

Answer 2

Non so se questo risponde alla tua domanda, ma non sembra accettare 0 come valore. I browser scala da 1, come nel 100% ad es. 4, o 400%.

transform:scale(1,4);