Tôi làm cách nào để chia tỷ lệ vùng chứa cho phù hợp với nội dung được chia tỷ lệ (hoặc được biến đổi)?

Question

Tôi có một số <div>, bên trong đó một số nội dung phức tạp được hiển thị với quy mô biến đổi được áp dụng. Vấn đề của tôi là <div> chiếm không gian tương tự mà nó sẽ lấy ngay cả khi không có biến đổi nào được áp dụng. Tôi đã thực hiện một jsFiddle snippet để minh họa ý tôi.

I think I can understand why the behavior is like this, nhưng là có cách nào để làm cho nó để container mất không gian nhiều như nội dung của nó với tỉ lệ (và biến đổi khác, nếu có thể) được áp dụng?

Tôi nên lưu ý rằng thiết lập một cách rõ ràng width và height của <div> bên ngoài ảnh hưởng đến nội dung của văn bản quy mô (và điều này không được mong muốn hành vi trong trường hợp của tôi). Đưa nội dung được chia tỷ lệ vào một số là điều tôi muốn tránh.

Answer 1

Không sử dụng Javascript, không có cách nào để làm điều này, tôi không nghĩ. Chuyển đổi CSS không ảnh hưởng đến luồng bố cục cho các phần tử gần các phần tử được chuyển đổi, chúng chỉ thay đổi hệ tọa độ trong phần tử đó; vì vậy trẻ em bị ảnh hưởng, nhưng không phải cha mẹ hoặc anh chị em (MDN có một số chi tiết hơn về điều này).

Có một câu trả lời tuyệt vời ở đây có thể là một giải pháp phần JS-based dành cho bạn: https://stackoverflow.com/a/10913299/2524360

Answer 2

Tôi không biết điều này có trả lời câu hỏi của bạn hay không, nhưng dường như dường như không chấp nhận 0 làm giá trị. Các trình duyệt có tỷ lệ từ 1, như trong 100%, ví dụ: 4, hoặc 400%.

transform:scale(1,4);