Can I use object-fit with Bootstrap 4?

Yes, Bootstrap 4 doesn’t set object-fit, so you can add it freely to any image.

What if my browser doesn’t support object-fit?

Wrap the image in a container with fixed height and use width: 100%; height: auto; as a fallback.

2026-10-16 · Q&A guide

Bootstrap 4: Set Image Height Without Stretching

Learn how to set a fixed height on a Bootstrap 4 card image while keeping its aspect ratio intact.

Why the image stretches

The native <img> height attribute forces the element to that pixel value, ignoring the image’s natural aspect ratio. Bootstrap’s .card-img-top class sets width: 100% by default, so the image expands horizontally to fill the column, resulting in distortion.

Using object‑fit to preserve ratio

The CSS property object‑fit controls how an image scales inside its container. Setting object‑fit: cover makes the image fill the height while cropping excess width, and object‑fit: contain keeps the whole image visible without cropping.

.card-img-top {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

Applying the CSS to .card-img-top

Remove the height attribute from the <img> tag. Add the CSS block above to your stylesheet or a <style> tag. The image will now respect the 200px height, keep its ratio, and stay responsive.

<img class="card-img-top" src="https://placeimg.com/640/480/animals" alt="Card image cap">

Responsive fallback for older browsers

object‑fit is unsupported in IE11. Wrap the image in a container with fixed height and overflow hidden, then set the image to width: 100%; height: auto;. This preserves the aspect ratio while keeping the container height.

.card-img-wrapper {
  height: 200px;
  overflow: hidden;
}
.card-img-wrapper img {
  width: 100%;
  height: auto;
}

Complete example

Combining the above, the final markup and CSS look like this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet">

<style>
.card-img-top {
  height: 200px;
  object-fit: cover;
  width: 100%;
}
</style>

<div class="col-md-6">
  <div class="card">
    <img class="card-img-top" src="https://placeimg.com/640/480/animals" alt="Card image cap">
    <div class="card-block text-center">
      <p class="card-text">Text goes here</p>
      <p class="card-subtitle">More text goes here</p>
    </div>
  </div>
</div>

Takeaway: Apply object-fit: cover to .card-img-top and remove the height attribute to keep images responsive.