i’m trying to display an image, whose url is retrieved after a mysql query.

the image is returned through this snippet in file “model_fetch.php”:

 $result = $db->query($query);
 $image = $result->fetch_row();
 $imageData = base64_encode(file_get_contents($image[0]));
 if(empty($imageData)){
    echo 'no image link';
 }else{
    echo '<img src="data:image/png;base64,'.$imageData.'">';
 }

In the main php file “index.php”, there is the following snippet:

    function load_image(query)
{
    $.ajax({
        url:"model_fetch.php",
        method:"POST",
        data:{query:query},
        success:function(data)
        {
            $('#image_result').html(data);
        }
    });
}

In the same file “index.php”, i display the image in the modal body as follows:

    <!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Preview</h4>
  </div>
  <div class="modal-body">
      <div align="center"><div id="image_result"></div></div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Exit</button>
  </div>
</div>

The problem is that id=”image_result” returns sometimes images bigger that modal-body. The question is, how can i adapt the image in modal-body without changing the image resolution manually?