Help with bootstrap modals and large resolution images

HTML & CSS
1

I have a website -rmdigitaldesign.com 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

3

Hi,

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{overflow:auto}
.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{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:auto;
overflow:auto;}
.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:

4

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