每次点击都会改变元素的宽度

Question

我试图获取图像的宽度，然后使div的宽度相同。

HTML

<!-- Thumbnail -->
<div class="work-img">
    <img data-toggle="modal" data-target="#myModal" target="15" src="images/15.jpg" class="img-responsive" alt="">
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" />
            </div>
        </div>
    </div>
</div>

的JavaScript

$('.work-img img').click(function(){  // On thumbnail click
    $('.modal-body').find('img').attr({ // Find image tag and add attribute 
        src: "images/" + $(this).attr('target')+ "-1.jpg" // Add large image source according to image dynamically
    });
});
// Now the large image will be shown in the modal and I want to give the modal-dialog a width according to image width. For that I use this.
$("#myModal").on("shown.bs.modal", function () { // On modal show
    $('.modal-dialog').css({ // Add width using css to .modal-dialog
        width: $(this).find('.modal-body').find('img').width(), // Get the width of image, that was loaded dynamically
        'max-width': '80%' // max-width of the modal will be 80% of the screen
    });
    $('.modal-body').find('img').css('max-width', '100%'); // Add 100% width to loaded image so it remains in the modal-body
});

在此之后我获得了图像的宽度，但是每次点击它都会使宽度减小10％。我的代码中的问题是什么？