I'm using bootstrap modal to show images.

How do I simply make Twitter Bootstrap modal window bigger?

I'm using code from the (related) question:

$('#myModal').modal({
        backdrop: true,
        keyboard: true,
        show: false
    }).css({
        // make width 90% of screen
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
        // center model
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});

But here's the result:

I have to scroll it down. How do I keep image ratio and show it without a scrollbar?

I'm using bootstrap modal to show images.

How do I simply make Twitter Bootstrap modal window bigger?

I'm using code from the (related) question:

$('#myModal').modal({
        backdrop: true,
        keyboard: true,
        show: false
    }).css({
        // make width 90% of screen
       'width': function () { 
           return ($(document).width() * .9) + 'px';  
       },
        // center model
       'margin-left': function () { 
           return -($(this).width() / 2); 
       }
});

But here's the result:

I have to scroll it down. How do I keep image ratio and show it without a scrollbar?

• javascript
• jquery
• css
• twitter-bootstrap

• 2 Completely irrelevant, but I do not like camelcased css selectors. But that is just a matter of taste :) – nathanvda Commented Jun 18, 2013 at 8:17
• Me too. I like splitting them by a dash. I've just copied it from source and that's all:) – lexeme Commented Jun 18, 2013 at 8:24

1 Answer 1

When we show images with bootstrap modal, we use the following css:

#myModal {
  max-height: 80%;
  overflow-y: auto;

  .modal-body {
    max-height: none;
    text-align: center;
  }
}

And then just do

$('#myModal').modal("show");

The crux is setting the max-height on .modal-body to none.