当前位置：文江博客话题详情

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

发布于 2024-10-16 00:05:43 字数 235 浏览 4 评论 0原文

这个问题与： jquery 中可调整大小、可拖动的对象有关。可能吗？

大家好，

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

番薯 2024-10-23 00:05:43

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

回复收藏 0 原文

涫野音 2024-10-23 00:05:43

基本上，这将由一个可调整大小的容器（我说 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/

将图像的位置设置为Absolute 将其从文档流中取出，并将其相对于第一个非静态定位的祖先（在本例中为包含的可拖动 div）定位。内容 div 上的相对位置是为了确保图像后面的内容正确的堆栈顺序，否则“背景”将成为前景。

如果您想使用该特定标记来支持 IE7，以修复 jQuery UI 大小调整控件的堆叠上下文，您可能需要考虑一下，但我将把这个问题留给您。希望这将为您指明正确的方向。

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

Basically this would consist of a resizable container (I'd say div) with a non-static position (that'll happen inevitably if you're making it draggable), a "background" object with position set to absolute and 100% width/height, and a content container (another div) set to position relative. Should do the trick.

<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>

Check out an example: http://jsfiddle.net/wVAT2/

What happens is that setting the image's position to absolute takes it out of the document flow and positions it relative to the first non-statically positioned ancestor (in this case, the containing draggable div). The relative position on the content div is to ensure the proper stack order for the content that follows the image, otherwise the "background" becomes the foreground.

You'd probably have to do some thinking if you wanted to support IE7 with that particular markup to fix the stacking context for jQuery UI's resizing controls, but I'll leave that one to you. Hopefully this will point you in the right direction.

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.

回复收藏 0 原文

~没有更多了~