CSS轉換比例創建預覽

Question

我正在嘗試縮放其中的內容以適合200x200框。基本上我想通過在較小的div中顯示其內容來製作更大的div的「預覽」。

我將它縮小了40％。問題是，當我將其縮小40％並將其放置在與其重疊的200x200框中時。有沒有辦法說，而不是按百分比縮小它以縮小到一個特定的大小？例如，我可以縮小到200x200嗎？

我希望這樣做的寬度和高度不同的幾個div並將它們放入一個200x200像素的盒子。我不想使用溢出：隱藏或滾動。

Answer 1

我認爲你需要用javascript來做到這一點。等待直到div的所有內容都被加載，包括圖像，以便它達到其最終尺寸。然後你需要獲得寬度和高度，或者用jquery或者getBoundingClientRect（如果你使用的是css-transforms而不是這個方法應該可用）並且計算比例因子，在那裏你應該考慮是否使用寬度和高度或div的高度來計算該因子。這意味着你應該照顧div的長寬比和它應該適合的所需大小。最後，你可以通過JavaScript設置值的風格。