调整大小拖动对象背景图像上调整

这个问题是涉及到：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

调整大小拖动对象背景图像上调整

回答

相关问题