How can I make an image responsive in a bootstrap modal?

Question

I have a image gallery that shows a larger version of the image when an image is clicked.

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.

I want the image in the modal to be responsive so that it is resized when I have different resolutions.

Also I would love to know if there is some problem using modal views when on a phone?

The script I have that sets the different images dynamically is

$(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);
        });
    });

and a corresponding image link is

<a data-toggle="modal" data-id="Images/FullImages/LargeVersion.jpg" data-desc="Descriptive text" class="open-ImageModal" href="#imageModal">
                            <img src="Images/Thumbs/SmallVersion.jpg" />
                        </a>

Answer 1

Using .img-responsive works great when you want an image that adjust to the width of the containing object. If you want and image that adjusts to the height instead you just have to switch the definitions around, i.e.

.img-responsive-height
{
  display: block;
  width: auto;
  max-height: 100%
}