調整大小拖動對象背景圖像上調整

這個問題是涉及到：Resizable, draggable object in jquery. Possible?調整大小拖動對象背景圖像上調整

您好所有，

我想調整jQuery的調整大小一個div的背景圖像。我該怎麼做？

謝謝

2011-02-05 Pabuc

我目前有一個可調整大小和可拖動div與背景圖像，但我還沒有實現任何東西來調整背景圖像。你可以看看我是如何設法使其可調整大小和可拖動從http://stackoverflow.com/questions/4903863/resizable-draggable-object-in-jquery-possible/4904058#4904058 – Pabuc 2011-02-05 00:35:07

你不能設置一個CSS背景圖像的大小。但也許這http://www.cssplay.co.uk/layouts/background.html或這將有助於http://css-tricks.com/how-to-resizeable-background-image/

來源

2011-02-05 00:35:04 gearsdigital

這是用一個div背景圖。我需要在此輸入文字，因此我無法直接將其作爲圖像。有背景圖片的div有什麼解決方法嗎？ – Pabuc 2011-02-05 00:39:01

基本上，這將包括一個可調整大小的容器（我說的div）與非靜態的位置（如果你讓拖動那將不可避免地發生），一個位置設置爲絕對和100％寬度/高度的「背景」對象，以及設置爲相對位置的內容容器（另一個div）。應該做的伎倆。

<style> 
    #resizable { width: 150px; height: 150px; overflow: hidden; } 
    #resizable > img.background { width: 100%; height: 100%; position: absolute; top: 0; left: 0;} 
    #resizable > div.content { position: relative; padding: 0.5em; color: White; font-weight: bold;} 
</style> 

<div id="resizable"> 
    <img src="http://www.path.to/your/image.jpg" class="background"> 
    <div class="content"> 
     <p>Content paragraph.</p> 
    </div> 
</div>

退房一個例子：http://jsfiddle.net/wVAT2/

什麼情況是，圖像的位置設置到絕對就拿憑證流的，並對其定位相對於所述第一非靜態定位祖先（在這種情況下，包含可拖動的div）。內容div上的相對位置是爲了確保圖像後面內容的正確堆棧順序，否則「背景」將成爲前景。

你可能必須做一些思考，如果你想支持IE7與特定的標記來解決的jQuery UI的調整控制堆疊內容，但我會離開一個給你。希望這會讓你指向正確的方向。

如果您希望保持背景縱橫比而不是在調整大小時伸展它，請考慮綁定調整resizable的resize事件中調整圖像元素的函數。

來源

2011-02-05 06:27:09 lsuarez

調整大小拖動對象背景圖像上調整

回答

相關問題