Как исправить эту проблему размера изображения внутри модального?

Question

img1

img2

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

HTML

 <div class='row'>
               <div class='col-md-3 img-content' *ngFor="let image of images let i = index">
                  <img (click)="openModal();currentSlide(i+1)" class="hover-shadow cursor img-responsive"
                    src="http://res.cloudinary.com/dfg5p1pww/image/upload/v{{image.imgVersion}}/{{image.imgId}}">
               </div>
            </div>

    <div id="myModal" class="slide-modal">
                   <span class="close cursor" (click)="closeModal()">&times;</span>
                   <div class="slide-modal-content">

                      <div class="mySlides" *ngFor="let image of images let i = index">
                         <img class="img-responsive1" src="http://res.cloudinary.com/code/image/upload/v{{image.imgVersion}}/{{image.imgId}}" style="width:100%">
                      </div>

                      <a class="prev" (click)="plusSlides(-1)">&#10094;</a>
                      <a class="next" (click)="plusSlides(1)">&#10095;</a>

                      <div class="caption-container">
                         <p id="caption"></p>
                      </div>

                      <div class="slide-column" *ngFor="let image of images let i = index">
                         <img (click)="currentSlide(i+1)"
                          class="img-responsive" src="http://res.cloudinary.com/code/image/upload/v{{image.imgVersion}}/{{image.imgId}}" style="width:100%">
                      </div>
                   </div>
                </div>

CSS

.slide-column {
  float: left;
  width: 25%;
}
.slide-modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}
.slide-modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.next
{
  right: 0;
  border-radius: 3px 0 0 3px;
  color:#ffffff !important
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
  color:#ffffff !important
}
img {
  margin-bottom: -4px;
  max-width:100%;
}
.img-responsive {
  width: auto;
  height: 250px;
}
.img-responsive1
{
  height:100%;
   width:auto; 
  vertical-align: top;
}

Проблема внутри этих классов slide-modal , slide-modal-content , img-responseive1 Также на рисунках выше вы можете видеть, как это выглядит? Мы используем Bootstrap 4 в этом проекте с Angular. Как установить размер модального окна и настроить его на весь экран и в то же время разрешить подгонку изображений к экрану (без прокрутки и, если изображение длинное, измените ширину для правильного его отображения вместо изменения просто высоты втаким образом, как это показано на рисунке)?

Answer 1

Я бы посоветовал использовать встроенные CSS-классы Bootstrap для быстрого отклика, а не использовать собственные селекторы CSS. Адаптивность в Bootstrap основана на ширине экрана , а не на высоте, поскольку Bootstrap использует CSS Media Queries на основе ширины. Это решит проблему с горизонтальной прокруткой для ваших изображений, так как изображения будут автоматически масштабироваться до ширины родительского контейнера. Чтобы сделать ваши изображения отзывчивыми в Bootstrap, просто примените к ним класс .img-fluid:

<img src="..." class="img-fluid" alt="Responsive image">

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

Непосредственно из документации Bootstrap :

" Изображения в Bootstrap реагируют на .img-fluid. max-width: 100%; и height: auto; применяются кизображение так, чтобы оно масштабировалось вместе с родительским элементом."

Надеюсь, это поможет!