How to Create a div that Contains Multiple Fixed-Size Images?

Last Updated : 27 Sep, 2024

Creating a div that contains multiple fixed-size images involves defining a container (div) in HTML and applying CSS to set consistent dimensions for the images. This ensures that all images within the container maintain the same width and height, providing a uniform layout.

Approach

HTML Structure: First, create a <div> tag to serve as a container. Insert multiple images, each wrapped in its own separate <div> tag with a unique class for styling. This helps in organizing and targeting individual images effectively.
Container Setup: The .image-container div uses flex to display images, allowing for responsive layouts with image wrapping and alignment.
Fixed Image Size: Each image is given a fixed width and height (150px) through the .fixed-size-image class to maintain uniform dimensions.
Image Cropping: The object-fit: cover property ensures images are cropped to fit their container, preserving aspect ratio without distortion.
Gap Between Images: The gap: 10px property ensures there is consistent spacing between the images within the flex container.

Example: The following example shows how to make a <div> tag that contains multiple fixed-size images

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Fixed-Size Images in a Div</title>
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <style>
        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            align-items: center;

        }

        .fixed-size-image {
            width: 150px;
            /* Fixed width */
            height: 150px;
            /* Fixed height */
            object-fit: cover;
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240618141932/61M1WuTUcUL_AC_UF10001000_QL80_-(1).jpg"
            alt="photo" class="fixed-size-image" />
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240618140923/asus.jpg" 
             alt="photo"
            class="fixed-size-image" />
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240618140635/microsoft.jpeg" 
             alt="photo"
            class="fixed-size-image" />
        <!-- Add more images as needed -->
    </div>
</body>

</html>