CODEWITHSUNDEEP
twitter-bootstrapjquery-mobileresponsive-design
Jimmy.Bystrom
Jimmy.Bystrom

Reputation: 297

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

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>

Upvotes: 4

Views: 14521

Answers (1)

Jimmy.Bystrom
Jimmy.Bystrom

Reputation: 297

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

Upvotes: 7

Related Questions