CSS轉換比例

我有一個元素需要縮放爲父元素的100％。因爲元素包含基於像素的動畫和可縮放的圖像，所以我無法使用百分比。無論如何，使用CSS變換比例來做到這一點？CSS轉換比例

我想有一個爲防止該問題的技巧，如果你使用的會發生百分比。你能解釋更多嗎？你是否想要確保你的圖像不是以一種錯誤的長寬比或更高的質量進行縮放？ – Sheric

動畫通過使用CSS精靈發生。對該元素進行的任何更改都會破壞動畫。 http://spritely.net/ –

你可以發佈一些代碼給我們嘗試一下嗎？ [規模總是百分比]（http://jsbin.com/jojip/1/），不是嗎？（在這種情況下，它可以擴展到200％） – Joeytje50

相對的css轉換值是相對於它本身（邊界框）。 E.g一些絕對的中心片段：

width: 100px; 
height: 200px; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%);

在Firefox中，你可以嘗試一些黑客你的父元素：

background-image: -moz-element(#yourElementToScale); 
background-size: contain;

但通常它不是沒有使用上寬/高比例的純CSS可能。如果你想利用javascript只是因素規模：

var scaleX = parentElement.offsetWidth/element.offsetWidth; 
var scaleY = parentElement.offsetHeight/element.offsetHeight;

應用這種規模因素作爲轉變可能看起來像：

transform: scale(scaleX, scaleY);

2015-08-13 00:17:05 jbenker

回答