<div class="slide">
  <img class="bg-image" src="https://placehold.jp/150x200.png">
  <div class="slide-content">
    <div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
    <a href="#" class="slide-content-item">Slide Btn</a>
  </div>
</div>

<div class="slide" style="height: 230px;">
  <img class="bg-image" src="https://placehold.jp/150x200.png">
  <div class="slide-content absolute-fix">
    <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</div>
    <a href="#" class="slide-content-btn">Slide Btn</a>
  </div>
</div>

.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide {
  position: relative;
  display: grid;
  margin: 5px;
  width: 200px;
}

.slide-content {
  padding: 10px;
  z-index: 1;
}

.slide-content-btn {
  border: 1px solid white;
  margin-top: 10px;
  padding: 5px 8px;
  display: inline-block;
}

.absolute-fix {
  position: absolute;
  bottom: 0;
  right: 0;
  top: 0;
  left: 0;
}