I am using a div
tag in code as shown below:
It is safe to assume that by fitting you mean covering all of the width. This is because
col-sm-6
or col-md-6
or col-lg-4
.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.
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/
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
}