Same height on card and img

Question

I try to make owl-carousel with cards. And I need to help with two things. First how to crop img to same size in every card and center it. And second thing how to make all cards with same height. I tried lot of things, but nothing works and don't know if is there any collision with owl-carousel css or problem is in me

.cards {
    width: 100%;

}
a{
    text-decoration: none;
    color: black;
}
h1 {
    padding: 1rem;
}
p{
    padding: 0 1rem;
}
.card{
    
    height: 500px;
    position: relative;
    border: 1px solid gray;
    border-top: none;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
}
img.img_slide{
    width: 100%; 
    height: auto;
}
button{
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: 10px 25px;
    border-radius: 30px;
    background-color: #27ae60;
    color: #fff;
    position: absolute;
    bottom: 2%;
    right: 5%;
}
@media only screen and (max-width: 450px){
    h1{
        font-size: 1.5rem;
        padding: .3rem;
    }
    p {
        padding: .3rem;
        word-wrap: break-word;
    }
    .card{
        height: 400px;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>



    <div class="cards owl-carousel">
        <a href="#" class="jobs_link"><div class="card item">
            <img src="https://zelenaruza.sk/wp-content/uploads/2016/01/i_179285.jpg" alt="" class="img_slide">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem </p>
            <button>Read more</button>
        </div></a>
        <a href="#" class="jobs_link"><div class="card item">
            <img src="https://zelenaruza.sk/wp-content/uploads/2016/01/logo.jpg" alt="">
                    <h1>Lorem ipsum</h1>
            <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem </p>
            <button>Read more</button>
        </div></a>


    </div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:40,
    responsiveClass:true,
    responsive:{
        0:{
            items:1.2,
            nav:false,
            margin:10
        },
        600:{
            items:2.2,
            nav:false
        },
        900:{
            items:3.5,  
            nav:false
        },
        1500:{
            items:4,
            nav:false
        },
        1700:{
            items:4,
            nav:false,
            margin:100
        }
    }
})
</script>

Answer 1

OK first off, my favourite way to create an easily scaleable image is to do the following:

HTML:

<div class="thumbnail"></div>

CSS:

.thumbnail {
    padding-top: 100%; // - This will create a square. 1:1
    background: red;
}

Now that you have a nice aspect ratio scaleable image, it's time to move onto the cards. Some of this you may need to decipher, but it should work relatively alright.

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.thumbnail {
  padding-top: 50%;
  width: 100%;
  background: red;
}

.card {
  flex-basis: 25%;
  border: 1px solid #ccc;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

.content {
  margin-bottom: 1em;
}

.btn {
  margin-top: auto;
  display: block;
}

<div class="row">
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I am some content!
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
  <div class="card">
    <div class="thumbnail"></div>
    <div class="content">
      I have some more content,
      <br/>
      that spans multiple lines.
    </div>
    <a href="#" class="btn">
      Read More
    </a>
  </div>
</div>