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%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-0 mt-2">
  <div class="row ">
    <div class="col-md-6 col-12 p-0 h-200">
      <img class="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>
    <div class="col-md-6 col-12 p-0 h-200">
      <img class="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/