在调整大小时调整可拖动对象背景图像的大小

Posted 2023-05-08

【中文标题】在调整大小时调整可拖动对象背景图像的大小

【英文标题】：Resize draggable objects background image on resize

【发布时间】：2011-06-21 17:09:24

【问题描述】：

此问题与：Resizable, draggable object in jquery. Possible?

大家好，

我想在 jquery 调整大小时调整 div 的背景图像。我该怎么做？

谢谢

【问题讨论】：

我目前有一个带有背景图像的可调整大小和可拖动的 div，但我还没有实现任何调整背景图像大小的方法。您可以从***.com/questions/4903863/…

了解我是如何设法使其可调整大小和可拖动的

【参考方案1】：

您不能设置 CSS 背景图像的大小。但也许这个http://www.cssplay.co.uk/layouts/background.html 或者这将有助于http://css-tricks.com/how-to-resizeable-background-image/

【讨论】：

这是一个带有背景图片的 div。我需要在其中输入文本，因此我无法直接将其设为图像。带有背景图片的 div 有什么解决方法吗？

【参考方案2】：

基本上，这将包括一个可调整大小的容器（我会说 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 事件上绑定一个调整图像元素大小的函数。