Article Categories

Selected Reading

How to create div that contains the multiple fixed-size images

HTML Web Development Front End Technology

Creating a div container with multiple fixed-size images is a common requirement in web development for galleries, portfolios, and product catalogs. This approach ensures visual consistency by giving all images uniform dimensions regardless of their original sizes.

Syntax

Following is the basic HTML structure for a div containing multiple images

<div class="image-container">
   <img src="image1.jpg" alt="Description">
   <img src="image2.jpg" alt="Description">
   <img src="image3.jpg" alt="Description">
</div>

Following is the CSS syntax to create fixed-size images

.image-container img {
   width: fixed-width;
   height: fixed-height;
   object-fit: cover;
}

Using CSS Class Selectors

The most effective approach is to style the img elements within a specific container using CSS class selectors. This method ensures all images maintain consistent dimensions while keeping the code clean and maintainable.

Example

Following example demonstrates creating a responsive image gallery with fixed-size images

<!DOCTYPE html>
<html>
<head>
   <title>Fixed Size Image Gallery</title>
   <style>
      .imageGallery {
         display: flex;
         flex-wrap: wrap;
         gap: 2rem;
         justify-content: center;
         padding: 20px;
      }
      .imageGallery img {
         width: 200px;
         height: 200px;
         border-radius: 8px;
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
         object-fit: cover;
         transition: transform 0.3s ease;
      }
      .imageGallery img:hover {
         transform: scale(1.05);
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif;">
   <h2 style="text-align: center; color: #333;">Course Gallery</h2>
   <div class="imageGallery">
      <img src="https://via.placeholder.com/300x200/4CAF50/white?text=Python" alt="Python Training">
      <img src="https://via.placeholder.com/300x200/2196F3/white?text=JavaScript" alt="JavaScript Training">
      <img src="https://via.placeholder.com/300x200/FF9800/white?text=HTML+CSS" alt="HTML CSS Training">
      <img src="https://via.placeholder.com/300x200/E91E63/white?text=React" alt="React Training">
   </div>
</body>
</html>

The output shows four images in a responsive grid layout, each with uniform 200x200 pixel dimensions

Course Gallery
[Python] [JavaScript] [HTML+CSS] [React]
(4 square images in a centered, responsive grid with hover effects)

Using the object-fit Property

The object-fit property is crucial when working with fixed-size images. It controls how the image content fits within the specified dimensions without distortion.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Object-fit Property Demo</title>
   <style>
      .comparison {
         display: flex;
         gap: 2rem;
         justify-content: center;
         padding: 20px;
      }
      .image-box {
         text-align: center;
      }
      .cover-img {
         width: 150px;
         height: 150px;
         object-fit: cover;
         border: 2px solid #ddd;
      }
      .contain-img {
         width: 150px;
         height: 150px;
         object-fit: contain;
         border: 2px solid #ddd;
         background: #f9f9f9;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif;">
   <h2 style="text-align: center;">Object-fit Comparison</h2>
   <div class="comparison">
      <div class="image-box">
         <img src="https://via.placeholder.com/300x200/9C27B0/white?text=Cover" alt="Cover example" class="cover-img">
         <p>object-fit: cover</p>
      </div>
      <div class="image-box">
         <img src="https://via.placeholder.com/300x200/3F51B5/white?text=Contain" alt="Contain example" class="contain-img">
         <p>object-fit: contain</p>
      </div>
   </div>
</body>
</html>

This example shows the difference between object-fit: cover (crops to fill) and object-fit: contain (fits entirely within bounds)

Object-fit Comparison
[Cover Image]    [Contain Image]
object-fit: cover   object-fit: contain

Creating a Card-style Gallery

For more sophisticated layouts, you can create card-style containers with fixed-size images and additional content.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Card Gallery with Fixed Images</title>
   <style>
      .card-gallery {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 1.5rem;
         padding: 20px;
         max-width: 1200px;
         margin: 0 auto;
      }
      .card {
         background: white;
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0,0,0,0.1);
         overflow: hidden;
         transition: transform 0.3s ease;
      }
      .card:hover {
         transform: translateY(-5px);
      }
      .card img {
         width: 100%;
         height: 180px;
         object-fit: cover;
      }
      .card-content {
         padding: 15px;
      }
      .card h3 {
         margin: 0 0 10px 0;
         color: #333;
      }
      .card p {
         margin: 0;
         color: #666;
         font-size: 14px;
      }
   </style>
</head>
<body style="font-family: Arial, sans-serif; background: #f5f5f5;">
   <h1 style="text-align: center; color: #333; margin: 20px 0;">Programming Courses</h1>
   <div class="card-gallery">
      <div class="card">
         <img src="https://via.placeholder.com/300x180/FF5722/white?text=HTML" alt="HTML Course">
         <div class="card-content">
            <h3>HTML Fundamentals</h3>
            <p>Learn the basics of HTML markup language</p>
         </div>
      </div>
      <div class="card">
         <img src="https://via.placeholder.com/300x180/2196F3/white?text=CSS" alt="CSS Course">
         <div class="card-content">
            <h3>CSS Styling</h3>
            <p>Master CSS for beautiful web designs</p>
         </div>
      </div>
      <div class="card">
         <img src="https://via.placeholder.com/300x180/FFC107/black?text=JavaScript" alt="JavaScript Course">
         <div class="card-content">
            <h3>JavaScript Programming</h3>
            <p>Interactive web development with JS</p>
         </div>
      </div>
   </div>
</body>
</html>

This creates a responsive card grid where each image maintains a fixed height of 180px while adapting to different screen sizes.

Key Properties for Fixed-Size Images

Following are the essential CSS properties for creating fixed-size image layouts

Property	Purpose	Common Values
`width`	Sets the fixed width of images	`200px`, `100%`, `15rem`
`height`	Sets the fixed height of images	`200px`, `auto`, `15rem`
`object-fit`	Controls how image fits within dimensions	`cover`, `contain`, `fill`
`object-position`	Sets the position of the image content	`center`, `top`, `50% 50%`

Best Practices

When creating fixed-size image galleries, consider these recommendations

Use object-fit: cover to maintain aspect ratios while filling the container
Implement responsive design with CSS Grid or Flexbox for different screen sizes
Add loading states or placeholder images for better user experience
Use alt attributes for accessibility and SEO benefits
Consider lazy loading for large image galleries to improve performance

Conclusion

Creating a div with multiple fixed-size images is achieved by applying consistent width and height values to all images within the container. Using CSS class selectors and the object-fit property ensures uniform appearance while maintaining image quality and responsiveness across different devices.

Aman Gupta

Updated on: 2026-03-16T21:38:54+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next