如何使用轉換爲刻度只用CSS

我使用下面只用CSS來擴大與窗口重新大小<div>：

position:  relative; 
width:   40%; 
height:   0em; 
padding-bottom: 30%;

，它就寬度和高度而言都是有效的。

該部門包含一個靜態<img>，它也可以擴展。

但是，該內容還包括使用new Image()創建的移動圖像（.png）以及用於移動它的其他JS代碼。此.png是而不是縮放與<div>的大小。事實上，這個.png甚至沒有顯示。

如果我使用Safari來放大和縮小，一切都會縮放 - 尺寸爲<div>，靜態圖像。 .png也顯示爲應該。

問題：

所以...我怎麼可以模仿使用變換和類似的調用，替代上述位置寬度高度paddingBottom來組的比例？

將帖子在2015年9月27日

FWIW，我很新的jsfiddle，只是增加了一個的jsfiddle。希望這會結束所有的討論（除了解決這個的jsfiddle所示，當然，這個問題）... http://jsfiddle.net/johnlove/yL2td3r2/

將帖子在2015年9月5日

我不知道這是否會適得其反......但是：

（一）問題尋求幫助的代碼必須包括所需的行爲：

我已經指出，「縮放<div>，只要使用CSS」

（B）一個特定的問題或錯誤窗口重新大小：

我已經指出，.png文件是不縮放與<div>的大小。

（C）必要最短的代碼重現它

我在此特意通過，因爲我選擇了寧可尋求如何利用改造，而不是上面顯示爲灰色塊。此外，我知道轉換作品，包括.png。我不知道如何根據改變的窗口寬度來調整transform: scale[xxx]。

對於那些更好奇，請採取甘德：www.lovesongforever.com/50。我試圖用窗口寬度縮放的「野獸」是「相機快門」jQuery插件。順便說一句，上面的「.png」是黑色相機快門本身。（d）下面的其他回答轉入SVG的土地，我根本不理解它，沒有，zip。

但是，再次，我只是變成了75歲，缺乏理解是我們老年人的典型特徵...... 1940年8月，如果您需要精確的話。

來源

2015-09-05 John Love

問題尋求代碼幫助必須包含所需的行爲，具體問題o r錯誤以及在問題本身**中重現它所需的最短代碼。請參閱[**如何創建最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

-2

第一步是承認你有一個問題 - 在這種情況下，問題在於你對CSS的依賴（以系統的方式做幾何上全面的事情）。沒關係，這是一個行業範圍內的災難性遺留問題，它甚至還沒有開始[等等] 的過程嘗試SVG-everything方法，它爲我工作。
https://github.com/Terebinth/Vickers

通知上線使用 https://github.com/Terebinth/Vickers/blob/master/lib/vickers__workshop.coffee#L63

（維氏作爲一個整體是在重構的迫切需要 - 在數據流/數據結構的設置和性能問題的缺陷相關的使用不足對於shouldComponentUpdate的事情，以及只是風格和一致性 - 但它只是用於原型設計，我已經開始了，希望它激勵人們移出HTML/CSS貧民窟）

來源

2015-09-05 16:21:24

:)很好，很好。學會用CSS來做平滑的轉換。 –

你的擴展div的解決方案是重構他的整個頁面來代替使用SVG？ –

我不是故意殘酷的，我只是想我可能會幫助另一個朝聖者走出地牢，進入同質座標的純粹光線。 CSS是一個可怕的噩夢;許多人認爲沒有其他選擇。斯德哥爾摩綜合症。 CSS應該只用於樣式（超）文本（標記） - 而不是任何類型的應用程序的全球圖形解決方案。 –

如何使用轉換爲刻度只用CSS

回答

相關問題