Question

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

有关

大家好，

我想在jquery resize上调整div的背景图片。我该怎么办？

谢谢

Answer 1

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

Answer 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调整大小控件的堆栈上下文，你可能需要考虑一下，但我会把它留给你。希望这会指出你正确的方向。

如果要保持背景宽高比而不是在调整大小时拉伸它，请考虑在可调整大小的resize事件上绑定一个调整图像元素大小的函数。

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

2 个答案: