Проблемы с изображением внутри Bootstrap модальный

Question

http://codepen.io/anon/pen/jWGXKJ

<a data-toggle="modal" href="#modal" class="btn btn-primary">Open</a> 
<div id="modal" class="modal modal-wide fade"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="http://i.imgur.com/aZO5Kol.jpg"/> 
     </div> 
    </div> 
    </div> 
</div> 

1. Как получить модальный расширить его ширину, чтобы соответствовать ее содержащий изображение без необходимости вычислять и использовать ширину изображения в пикселях.
2. Как получить горизонтальную полосу прокрутки в самом окне, когда модальная область простирается горизонтально за пределы текущего вида?

Answer 1

1) Нет необходимости в пиксели Вы можете сделать это с процентным%

img{ 
width:100%; 
} 

Answer 2

Для всех ваших вопросов, RTFM:

Как получить модальный расширить свой ширину, чтобы соответствовать его содержащему изображению, не вычисляя и не используя ширину изображения в пикселях.

Класс .modal-dialog. Он имеет значение по умолчанию width от 600px. Сделайте это следующим образом:

.modal { 
    text-align: center;  /* Center the modal window. */ 
} 

.modal-dialog { 
    width: auto; 
    margin: 30px auto; 
    display: inline-block; 
} 

Как получить горизонтальную полосу прокрутки, когда модальный проходит горизонтально за пределы текущего вида?

Это гарантирует, что, если содержимое выходит из диапазона модальных окон, оно отобразит полосы прокрутки.

.modal-dialog { 
    overflow: auto; 
}