title: How can I make an image responsive in a bootstrap modal?
body: <p>I have a image gallery that shows a larger version of the image when an image is clicked.</p>
  
  <p>The problem is that the larger version of the image is to large for the modal, i.e. I have scrollbars even if I view the page on a computer with a large screen.</p>
  
  <p>I want the image in the modal to be responsive so that it is resized when I have different resolutions.</p>
  
  <p>Also I would love to know if there is some problem using modal views when on a phone? </p>
  
  <p>The script I have that sets the different images dynamically is </p>
  
  <pre><code>$(document).ready(function () {$(document).on("click", ".open-ImageModal", function () {
              $(".modal-body #image").attr("src", $(this).data('id'));
              var desc = $(this).data('desc');
              $(".modal-body #description").text(desc);
          });
      });
  </code></pre>
  
  <p>and a corresponding image link is </p>
  
  <pre><code>&lt;a data-toggle="modal" data-id="Images/FullImages/LargeVersion.jpg" data-desc="Descriptive text" class="open-ImageModal" href="#imageModal"&gt;
                              &lt;img src="Images/Thumbs/SmallVersion.jpg" /&gt;
                          &lt;/a&gt;
  </code></pre>