Scaling inside the center of the image instead of changing the height

Question

I have a gallery in the center of my site - it has a dynamic width (bootstrap column) and a fixed height ( 80vh). I want the images inside to have the width of the container 50%and 350pxheight:

<div class="row">
  <div class="col-md-3"></div>
  <div class="col-md-6" style="height: 80vh;">
    <div style="overflow-y: auto;">
      <div style="width: 50%; height: 350px; float: left">
        <img src="..." style="min-width: 100%; height: 350px;">
      </div>
      <div style="width: 50%; height: 350px; float: left">
        <img src="..." style="min-width: 100%; height: 350px;">
      </div>
      <div style="width: 50%; height: 350px; float: left">
        <img src="..." style="min-width: 100%; height: 350px;">
      </div>
    </div>
  </div>
  <div class="col-md-3"></div>
</div>

The fact is that when the website is resized, the width changes, but the height remains the same - the image changes. Is there a better solution? I was thinking about scaling an image instead of resizing the whole object - is this possible?

Answer 1

350px , , background-size: cover . .: https://jsfiddle.net/nelonoel/c8zsscuL/