Изображение с переливом в начальной загрузки модальный

меня это до сих пор: codepen Изображение с переливом в начальной загрузки модальный

HTML:

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a> 


<div id="tallModal" 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/ikqKRG4.jpg"> 
     </div> 
    </div> 
    <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->

CSS:

.modal-dialog { 
    height: 100%; 
    width: 200px; 
    max-width: 100%; 
    margin: 0px auto; 
    overflow-y: auto; 
} 

@media (min-width: 768px) .modal-dialog { 
    margin: 0px auto; 
} 

.modal-body { 
    padding: 0; 
}

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

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

источник

2016-01-17 Gary In

положить IMG реагирующего класс IMG тег .. –

проверки ответа на этот вопрос поможет вам http://stackoverflow.com/questions/16152275/how-to-resize-twitter-bootstrap-modal-dynamically-based-on-the-content –

@Gray In. Поместите некоторый ожидаемый результат через некоторый снимок экрана. –

Put IMG реагирующих класс

<a data-toggle="modal" href="#tallModal" class="btn btn-primary">Wide, Tall Content</a> 


<div id="tallModal" 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/ikqKRG4.jpg" class="img-responsive"> 
     </div> 
    </div>

ширина Установить и высоту, если вы хотите.

источник

2016-01-17 14:29:56

Позволь мне знать, если это маленький хак работает для вас:

.modal-body { 
    max-height: calc(100vh - 210px); 
    overflow: auto; 
}

Вот вилка своего CodePen: https://codepen.io/geardoom3/pen/KvXdvY

источник

2017-08-14 02:48:54

Изображение с переливом в начальной загрузки модальный

ответ

Смежные вопросы