取img高度并在点击时添加到div高度

Question

我有一些可扩展的长图像。我想指示Jquery在单击这些高度时将图像的高度扩展到外部div的高度。如果有更好的方法，请告诉我。谢谢！

HTML：

<div class = "content">
    <div id = "test">          
        <a href="assets/image.jpg">
        <div class = "project">  
            <div class = "intro"> ... </div>
            <img class="sample" src="assets/Contactive.jpg">  <!--take heigth from here-->
        </div>
        </a>
    </div>
</div>

CSS：

.sample{
    float: right;
    height: auto;
    width: auto;
}

JQuery的：

$(document).ready(function() {

    var imageLinks = $('a[href$=".png"], a[href$=".jpg"], a[href$=".JPEG"], a[href$=".gif"], a[href$=".bmp"]');

    if (imageLinks.children('div').length) {

        imageLinks.click(

            function expand(e) {
                e.preventDefault();
                $(this).children('div').toggleClass('expanded');

                $(document).scrollTop($(this).offset().top);
                console.log('WHAT1');     /* console prints this */


                /* code in question starts here */

                $(this).children('div.project > img.sample').load(function() {

                    var pic_height = parseInt(this.height, 10);
                    console.log('WHAT2');      /* console does not print this */

                    $('.content').css('height', '+=' + pic_height);
                });
            }  
        );
    }
});

请原谅凌乱的编码，我对此很新。

谢谢！