What is the solution for addressing the size problem of the image within the modal?

img1

img2

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()">&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;
}

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?

Answer №1

If you're looking to ensure responsiveness in your design, consider leveraging Bootstrap's pre-defined CSS classes rather than creating custom selectors. Bootstrap focuses on responsiveness based on screen width rather than height, utilizing width-based CSS Media Queries. This approach can resolve the issue of horizontal scrolling for images, as they will automatically adjust to fit their parent container's width. To make images responsive in Bootstrap, simply add the .img-fluid class to them:

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

The .img-fluid class serves as a solid default for future images, preventing them from overflowing their parent container's width.

As stated in 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, this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I use Java Script to create animation of vertical black bars of a specific width moving across a white background?

Looking for a JavaScript code that can animate vertical black bars of a specific width moving over a white background. The desired outcome is similar to the video found at: https://www.youtube.com/watch?v=bdMWbfTMOMM. Thank you. ...

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

Is it possible to send both props and a function within a single onClick event in React?

After spending hours searching for the right solution, I have yet to find it. Let me explain my situation clearly. I have an Image Carousel feature on my website that should open when a user clicks on an image. I have 5 images on the website, and when a us ...

Utilize a fresh font style and replace the font family components in @mui/material with the new

Looking to bring in a fresh font family stored in a fonts directory and replace the existing mui base font family. import { responsiveFontSizes, createTheme } from '@mui/material'; import NEWFONTFAMILLY from '../fonts/something.otf' c ...

Trouble with displaying events on Angular UI-Calendar

I've been working with Angular UI Calendar and following the steps outlined on their website: http://angular-ui.github.io/ui-calendar/ Despite implementing everything correctly, I'm facing an issue where the events fetched from my API are not s ...

Issues with the FacebookConnect plugin on PhoneGap Build

Just getting started with PhoneGap build and attempting to create a simple app with a Facebook login button. The documentation for PhoneGap build makes it seem easy to add this plugin. index.html <!DOCTYPE html> <html> <head> <met ...

Gradually vanishing words while they glide across the screen

I want to achieve a similar effect seen in the game A Dark Room. The text in the game serves two purposes which I am trying to replicate: The new text is added above the old text instead of below it, pushing the older text down the page as the game progr ...

Is there a file outside of the website's root that needs to be linked?

Hey there, I could use some assistance with a little issue I am having: Running the latest release of Ubuntu server 64bit with 2 virtual websites Here is my folder structure: site1 (Accessible on the web) /var/www/site1 site2 (Intranet site) /var/www ...

Displaying the error message "No results found" in PHP AJAX live search with multiple values is not possible

I recently went through a tutorial on Most of it worked smoothly after setting it up on my local machine. However, I encountered an issue when searching for data not present in my database. I expected to receive an error message stating "No result found o ...

Error encountered when compiling SCSS with the '@use' statement

Currently, I am utilizing Gulp for the purpose of compiling scss into css. However, whenever I include a @use statement in my code, it does not compile the css correctly into the css file; instead, it simply duplicates the @use statement. What could be cau ...

Display Django radio buttons in a formatted list using the mark_safe() function

Exploring the Issue In an effort to include HTML instructions and display bullet points in my form label, I utilized 'mark_safe()' within a form: class FormFood(forms.Form): CHOICES = [ (1,'Yes'), (2, 'No')] response ...

Navigating jQuery Tabs by Linking to a Specific Tab in a Separate File

I am currently using Bootstrap 3 to develop a basic website. On the about.html page, I have set up Tabs with various content. <ul class="nav nav-tabs" id="TabSomos"> <li class="active"><a href="#somos" data-toggle="tab">About Us</a> ...

Incorporating Copyleaks SDK into Angular: A Seamless Integration

Currently, I'm in the process of implementing the Copyleaks SDK with Angular to conduct plagiarism checks on two text area fields within an HTML form. Within the form, my goal is to incorporate two buttons: one to check for plagiarism on one text area ...

Implementing dynamic content loading using CSS and jQuery upon link/button activation

I'm facing an issue where I am attempting to align content to the left side of my screen to display a feed while also ensuring that the pushed content is responsive. Unfortunately, the feed is not visible and the content remains unresponsive. Is ther ...

What is the trick to getting an accordion to expand when hovering, rather than when clicking?

Can the accordion be set to expand when hovering instead of clicking? Also, how can a different action be triggered on click? LATEST I was specifically referring to using the jQuery UI accordion widget for this functionality. ...

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

Is there a way to extract the URL I am supposed to be redirected to upon clicking a button on a website, without actually being redirected? The button triggers a complex Javascript function and is not a simple hyperlink. click() method doesn't meet my ...

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

How can one use Selenium to verify the existence of an element on a webpage?

Currently, I am developing a program in Selenium with Python and facing an issue. During the test execution, there is a possibility that a button may or may not appear on the webpage based on an unknown parameter. The relevant HTML tag for this button is ...

What are effective methods for testing HTML5 websites?

I'm currently working on a project to create a dynamic website using HTML5. The first page will prompt the user for specific inputs, and the following page will adjust accordingly based on these inputs. My main concern now is how to effectively test ...

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

I'm facing a roadblock in my journey to create a card game. The issue arises at the final stage of the Translate function implementation. In this game, the player is dealt 30 cards (I've simplified it to four for ease of programming), and upon cl ...