How to fit an image inside a Bootstrap 3 div?

Question

I am using a div tag in code as shown below:

<div class="col-sm-6 col-md-6 col-lg-4">
  <img src="images/dummy_image.png" class="img-responsive">
</div>

The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div, meaning specifically that I need to cover the full div using that image as it's resized.

I am using Bootstrap 3.3.7. Please advise.

Solution 1

Just add you images width to 100%.

But as you are saying user will upload various kind of images, so can use object-fit property.

Add the CSS like this:

.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>

You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/

Solution 2

For Bootstrap 4

<div class="col-sm-6 col-md-6 col-lg-4">
    <img src="images/dummy_image.png" class="img-fluid">
</div>

bootstrap.css

.img-fluid {
  max-width: 100%;
  height: auto
}

Solution 3

It is safe to assume that by fitting you mean covering all of the width. This is because

1. You typically do not know the height just by using col-sm-6 or col-md-6 or col-lg-4.
2. There is a huge probability of loss in aspect ratio of the image if you try to resize it according to your own will.

Use <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> for fitting the column. This will fit your image width-wise into the column and will automatically modify the height (keeping the aspect ratio in mind), so you do not have to worry about image getting illogically resized.