Help with bootstrap modals and large resolution images

I have a website that uses modal to show full size images selected from a thumbnail gallery. I am trying to show full size images (1600x1000) in the modal with scroll bars if the image is larger that the users screen size - I don’t need it to be responsive. Right now all I can get are smaller images in the modal. Can anyone show me how to do this? Thanks


This is not going to look very nice as the only element that can have the scrollbars is the modal-body element and setting overflow:auto on that element will cut off the box-shadow on the image.

Anyway the code would roughly be like this:

.modal-body img.img-responsive{width:auto;min-width:100%;height:auto}

Note that as the whole lots is contained in an element that is only 66% wide then it will not go full screen. If perhaps you wanted a full screen layout then you could try something like this instead.

.modal-body img.img-responsive {width:auto;min-width:100%;height:auto;margin:auto;}

However, I think the display you currently have is the best for your needs anyway :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.