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>

Did you try the [`.img-responsive`](http://stackoverflow.com/q/17932509/901048) class? — Blazemonger, Nov 20 '13 at 20:01
In the latest bootstrap there isn't such a class, I tried however to use the class defined in that question but the image still is to big for the modal window which means that there automatically is a scrollbar even on a large display. — Jimmy.Bystrom, Nov 21 '13 at 06:48
`.img-responsive` is in fact part of [Bootstrap 3](http://getbootstrap.com/css/#overview). It uses `max-width: 100%`, so I don't see how it can make the image too large for your container. — Blazemonger, Nov 21 '13 at 13:59
My bad, I thought I had the latest bootstrap css but apprently not. img-responsive works very good. Thank you! — Jimmy.Bystrom, Nov 25 '13 at 09:32

score 7 · Accepted Answer · answered Nov 25 '13 at 09:51

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%
}

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

1 Answers1