html - 如何解决模态内的图像大小问题？

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-responsive1同样在上面的图片中，你可以看到它是什么样子的？我们在这个元素中使用 Bootstrap 4 和 Angular。如何固定模态的大小并使其适合全屏，同时允许图像适合屏幕(无需滚动，如果图像很长，则更改宽度以正确显示它，而不是仅更改高度如图所示)？

Answer 1

我会考虑使用 Bootstrap 的内置 CSS 类来提高响应能力，而不是使用您自己的 CSS 选择器。在 Bootstrap 中，响应速度基于屏幕宽度而不是高度，因为 Bootstrap 使用基于宽度的 CSS 媒体查询。这将解决图像水平滚动的问题，因为图像会自动缩放到其父容器的宽度。要使您的图像在 Bootstrap 中响应，只需将 .img-fluid 类应用于它们:

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

这个 .img-fluid 类是一个良好的默认设置，让您的图像向前移动，因此它们永远不会溢出您的父容器的宽度。

直接来自 Bootstrap 的 documentation :

“Bootstrap 中的图像通过 .img-fluid 做出响应。max-width: 100%; 和 height: auto; 应用于图像以便它随父元素缩放。"

希望对您有所帮助!