1

この質問は、jquery のサイズ変更可能でドラッグ可能なオブジェクトに関連しています。可能？

皆さんこんにちは、

jquery resizeでdivの背景画像をリサイズしたい。どうすればいいですか？

ありがとうございました

4

2 に答える 2

1

CSSの背景画像のサイズを設定することはできません。しかし、おそらくこのhttp://www.cssplay.co.uk/layouts/background.htmlまたはこれはhttp://css-tricks.com/how-to-resizeable-background-image/に役立ちます

于 2011-02-05T00:35:04.463 に答える
0

基本的に、これは非静的位置 (ドラッグ可能にすると必然的に発生します) を持つサイズ変更可能なコンテナー (私は 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 のサイズ変更コントロールのスタック コンテキストを修正する場合は、おそらく少し考えなければならないでしょうが、それはあなたに任せます。うまくいけば、これはあなたを正しい方向に向けるでしょう。

サイズ変更時に背景の縦横比を引き伸ばすのではなく、維持したい場合は、サイズ変更可能なオブジェクトのサイズ変更イベントで画像要素のサイズを変更する関数をバインドすることを検討してください。

于 2011-02-05T06:27:09.943 に答える