Skip to content
Related Articles

Related Articles

Improve Article

How to make div that contains images to have fixed size using Bootstrap ?

  • Last Updated : 25 Dec, 2020

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :