Интервал жидкости для деления

Question

У меня есть страница с основным изображением. Основное изображение будет менять свою высоту и ширину в зависимости от фотографии. У меня также есть виджет совместного использования AddThis рядом с изображением. У меня правильное расстояние для одного размера изображения. Как мне установить AddThis div плавно поддерживать свой текущий интервал в зависимости от размера изображения?

Вот ссылка, чтобы вы могли увидеть пример того, о чем я говорю. Черный ящик (обведен белым) на странице представляет изображение, которое изменится. Элемент AddThis в настоящее время корректируется по высоте, но не по ширине. Вот CSS для элемента AddThis:

style = "left: -110px; top: -220px;" / * Как это в настоящее время позиционируется, и мне нравится текущий интервал. Он должен поддерживать этот интервал */

.addthis_floating_style{ 
        background: none repeat scroll 0 0 #000000 !important; 
        position: relative !important; 
}

Как я могу изменить это так, чтобы AddThis правильно регулировал его интервал к высоте и ширине изображения?

Другой способ, которым я думал об этом, - использовать jQuery для считывания высоты и ширины изображения, а затем установить left а также top элементы div AddThis в зависимости от размера изображения. Это должно быть рассчитано динамически.

Я буду использовать любой метод, который работает лучше всего. Пожалуйста, приведите пример, так как JavaScript не моя сильная сторона.

ОБНОВЛЕНИЕ: я прочитал другой вопрос и прочитал ответ, и мне интересно, решит ли это мою проблему, но, похоже, не работает правильно. Вот код, который я пробовал (Примечание: то, что я сейчас использую, приведено выше, код ниже, что я пробовал):

JS

var $j = jQuery.noConflict();
$j("#add-this-vertical").position({
    my:        "right top",
    at:        "right bottom",
    of:        $j("#image-container"),
   collision: "fit"
})

HTML

<div id="image-container">
<div class="img-center"><img src="/test.jpg" alt="test" />
</div>
<div id="add-this-vertical">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/
 300/addthis_widget.js">   
</script>
<!-- AddThis Button END -->
</div>


</div>

Answer 1

Вот как я это сделал, но мое изображение больше не в центре страницы. Работаю над этим...

<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
    <div style="text-align:center;">
         <img src="/Images/test.jpg" alt="test" />
    </div>
    <div style="position:absolute; bottom:0px; right:-40px;">
    <div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
         <a class="addthis_button_facebook"></a>
         <a class="addthis_button_twitter"></a>
         <a class="addthis_button_email"></a>
         <a class="addthis_button_compact"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/300/
            addthis_widget.js"></script>
 </div>
    </div>

Answer 2

Вы можете добавить немного JavaScript к тегу изображения следующим образом:

<img onload="onMyImageLoad(this)" />

а затем в другом месте в вашем документе место:

<script>

function onMyImageLoad( img )
{

var height = img.height

// now do something with this height value like change a 
// div's height or margin-top    

}

</script>