Изменение размера фонового изображения перетаскиваемых объектов при изменении размера

Question

Этот вопрос относится к: Изменяемый размер, перетаскиваемый объект в jquery. Возможно ли это?

Привет всем,

Я хочу изменить размер фонового изображения div при изменении размера jquery. Как я могу это сделать?

Спасибо

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 изменяемого размера.