Upon clicking on the modal, it displays the image similar to a lightbox, but the issue arises when the image becomes scrollable and does not fit the screen properly. Take a look at the code below:
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()">×</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)">❮</a>
<a class="next" (click)="plusSlides(1)">❯</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;
}
The main issues are found within the classes slide-modal, slide-modal-content, img-responsive1. On top of that, the images do not fit the screen properly. We are using Bootstrap 4 in conjunction with Angular in this project. How can we resolve the sizing of the modal to fit the full screen while ensuring the images also fit without scrolling, adjusting the width if necessary to display longer images correctly as depicted in the example images?