How to make div that contains images to have fixed size using Bootstrap ?
In this article, we will see how we can make a div that will contain images having a fixed size. This can be very helpful when designing a webpage for displaying a certain type of product. We will use bootstrap to implement the solution for the above problem.
Bootstrap CDN link: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
Example: Now let us see it with the help of an example.
HTML
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .album { display: flex; align-items: center; justify-content: center; } .imgContainer { max-width: 400px; max-height: 700px; overflow: hidden; } .imgContainer img { width: 100%; min-height: 100%; } </style></head> <body> <div class="album"> <div class="imgContainer"> <div class="row mt-3"> <div class="col px-2"> <img src="1.jpeg"> </div> <div class="col px-2"> <img src="1.jpeg"> </div> </div> <div class="row mt-3"> <div class="col px-2"> <img src="2.jpeg"> </div> <div class="col px-2"> <img src="2.jpeg"> </div> </div> <div class="row mt-3"> <div class="col px-2"> <img src="3.jpeg"> </div> <div class="col px-2"> <img src="3.jpeg"> </div> </div> </div> </div></body> </html> |
In the above code, we can add multiple rows and also multiple images in the same row, and the size of all images will remain the same.
Output:
Please Login to comment...