How to get images in Bootstrap's card to be the same height/width?

html

responsive-design

css

best-practices

byAnton Shumikhin·Jan 7, 2025

For equal height and width of Bootstrap card images, combine .img-fluid (ensuring responsiveness), a specific height, and object-fit: cover. To maintain uniform width, nest cards within a grid using .col-* classes. This example showcases the implementation:

<div class="row">
  <div class="col-md-4">
    <div class="card" style="height: 18rem;">
      <!-- Height on fleek ;) -->
      <img src="image.jpg" class="card-img-top img-fluid" alt="..." style="height: 12rem; object-fit: cover;">
      <!-- Card content -->
    </div>
  </div>
  <!-- Clone, command C command V, don't forget the same `height` styles -->
</div>

The above example ensures that .card has a common height which aids alignment, while img-fluid upholds the aspect ratio. The col-* grid promises equal widths.

Conquering responsive scaling with viewport units

Incorporating viewport units (vw or vh) further optimizes your card images for responsive designs:

vw (viewport width): Perfect for image scaling regarding width.
vh (viewport height): Preferable for image scaling related to viewport height.

.card-img-top {
  height: 25vh; /* adjust as per your brand */
  object-fit: cover;
  width: 100%; /* Full width, no regrets */
}

The above technique makes your card images scale friendly across different devices, while maintaining the aspect ratio.

Getting height consistency with `height` property

If viewport units do not meet your needs, opting for a fixed height using pixels (px) provides more control:

.card-img-top {
  height: 200px; 
  object-fit: cover;
  width: 100%; /* Width like your favorite song's reach */
}

Coupling with .img-fluid keeps the width responsive, while height remains same across cards ensuring consistency.

Harnessing advanced embedding techniques

Bootstrap embed utility classes help maintain aspect ratios in a breeze. Classes such as .embed-responsive and .embed-responsive-16by9 establish an intrinsic ratio, useful not just for videos but images as well:

<div class="card">
  <div class="embed-responsive embed-responsive-16by9">
    <img src="image.jpg" class="card-img-top embed-responsive-item" alt="...">
  </div>
  <!-- Card content -->
</div>

Tackling varying image dimensions

When dealing with images of diverse dimensions, maintaining the aspect ratio might seem challenging. object-fit: cover could clip parts of your image if it doesn't share the same ratio as your card. Manage the final appearance by strategically planning or editing your images to have similar aspect ratios where the important content is centrally located.

Prioritizing mobile-first design

Adopting a mobile-first outlook? Use the viewport height (vh) units for image sizes to emulate the screen's height. Always test your designs on a variety of devices to certify the visual experience remains uniform.

Side-stepping common pitfalls

Here are some common pitfalls to avoid:

White spaces: Use object-fit: contain carefully as it can create unwanted white spaces.
Image cropping: Be wary of object-fit: cover as it can crop essential parts of the image.
Overscaling: Avoid setting an excessively large height that can lead to pixelation.

Adjust these elements for a smoother visual experience, efficiently using your CSS grid classes, matching heights, considering source image qualities, and performing pedantic cross-device and cross-browser tests.

Attaining alignment and consistency

Here are few tips for optimal alignment:

Flexbox utility classes: Use .d-flex and .align-items-stretch to align scattered card contents of differing lengths.
Equal-width columns (col): Maintains uniformity without additional CSS.
Media queries: Opt for media queries to adjust image heights and layout on different screen sizes.