Question

当您单击模态时，它会像灯箱一样打开图像，但问题是它可以滚动并且图像不适合屏幕。这是代码：

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-sensitive1 同样在上图中，您可以看到它的外观吗？我们在这个带有Angular的项目中使用Bootstrap 4。如何固定模式的大小并使其适合全屏，同时如何使图像适合屏幕（无需滚动，如果图像较长，则更改宽度以正确显示它，而不仅仅是更改高度如图所示）？

Answer 1

我会考虑使用Bootstrap的内置CSS类进行响应，而不是滚动自己的CSS选择器。在Bootstrap中，响应性基于屏幕宽度而不是高度，因为Bootstrap利用基于宽度的CSS Media Queries。这将解决图像水平滚动的问题，因为图像将自动缩放到其父容器的宽度。要在Bootstrap中使图像响应，只需将.img-fluid类应用于它们：

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

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

直接来自Bootstrap的documentation：

“ 使用.img-fluid. max-width: 100%;响应Bootstrap中的图像，并将height: auto;应用于图像，使其与父元素一起缩放。”

希望有帮助！

如何解决模态内的图像尺寸问题？

1 个答案: