How to fix this image size issue inside the modal? - html

Question

img1
img2
When you click on the modal it opens the image like lightbox but the problem is that it's scrollable as well as images don't fit the screen. Here is the code:
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 problem is inside those classes slide-modal, slide-modal-content, img-responsive1
Also in the above images, you can see how does it look like? We use Bootstrap 4 in this project with Angular. How to fix the size of the modal and make it to fit the full screen and at the same time allow images to fit to the screen (without scrolling and if image is long then change the width for showing it correctly instead of changing just height in such a way as it's shown in the image)?

Answer 1

I would consider using Bootstrap's built-in CSS classes for responsiveness as opposed to rolling your own CSS selectors. Responsiveness, in Bootstrap, is based on screen width not height since Bootstrap utilizes width-based CSS Media Queries. This will solve the issue with the horizontal scroll for your images since images will automatically scale to their parent container's width. To make your images responsive in Bootstrap simply apply the .img-fluid class to them:
<img src="..." class="img-fluid" alt="Responsive image">
This .img-fluid class is a good default for your images moving forward so they never overflow your parent container's width.
Directly from Bootstrap's documentation:
"Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element."
Hopefully that helps!