how to put 2/3 different image sizes with out resizing on 100% screen width & 35vh height?

Question

I'm trying to make a image slider but my images are some random size. i want them all to be 100% screen width and 35vh height. and the center of the image should be visible. my imaegs are the size:

1280 x 958px
1280 x 960px
1280 x 983px

<!-- IMG SLIDESHOW + TEXT BOX -->
<div class="slider">
  <div class="slides">
    <img class="slide" src="img/beeldmateriaal/gasuniegebouw.jpg" alt="Gasunie Gebouw">
    <img class="slide" src="img/beeldmateriaal/keukens_appingedam.jpg" alt="Keukens Appingedam">
    <img class="slide" src="img/beeldmateriaal/fraeylemaborg_slochteren.jpg" alt="fraeylemaborg slochteren">
  </div>
  <button class="prev" onclick="prevSlide()">&#10094</button>
  <button class="next" onclick="nextSlide()">&#10095</button>
</div>

.slider {
  position : relative;
  width    : 100%;
  height   : 35vh;
  margin   : auto;
  overflow : hidden;

  img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
    }
  }
img.displaySlide {
  display : block;
  }

i've searched multiple times but coulnd't find a fix.