How To Decrease The Height Of Images In Bootstrap 4?

I would like to decrease the the height a bit so that the image fits better on my page. An example of what I mean: I tried to use custom CSS to change the height but then my image

Solution 1:

This is probably what you are looking for

.h-200 {
  height: 200px;
}

img.image {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

<linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"rel="stylesheet"/><divclass="container-fluid p-0 mt-2"><divclass="row "><divclass="col-md-6 col-12 p-0 h-200"><imgclass="img-fluid image"src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"></div><divclass="col-md-6 col-12 p-0 h-200"><imgclass="img-fluid image"src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"></div>

Link to the fiddle https://jsfiddle.net/6hpsoynf/1/