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

Question

这个问题与：Resizable,draggable object in jquery 有关。可能的？

大家好，

我想在 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% 宽度的“背景”对象/height 和一个内容容器（另一个 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 的调整大小控件的堆栈上下文，你可能需要做一些思考，但我会把那个留给你。希望这将为您指明正确的方向。

If you want to maintain the background aspect ratio rather than having it stretch as you resize, consider binding a function that resizes the image element on the resizable's resize event.