Image to fit transforming column

Question

I would like to split a webpage into 3 even segments (left middle right) and have them scale 105% when hovered on. Currently, my images are set evenly width-wise, but height-wise they're too small. resolution wise the images are fine, but is there any way I can set it so they're centered, large enough to fill the screen, and cropped to that size?

html, body { 
    font-family:Arial, Helvetica, sans-serif;
    background-color: black;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    width:100%;
}

.column {
    width:calc(100% / 3);
    height: fit-content;
    float:left;
    transition: 0.3s;
}

.column img {
    width:100%;
    height:fit-content;
    object-fit: cover;
}

.column:hover {
    transform: scale(105%);
}

<div class="row">

  <div class="container">

    <div class="column">
        <img src="Images/homeSlide.jpg" />
    </div>

    <div class="column">
        <img src="Images/projectSlide.jpg" />
    </div>

    <div class="column">
        <img src="Images/aboutSlide.jpg" />
    </div>
  </div>
</div>

Answer 1

The easiest way is with background-image, background-size: cover; and background-position: 50% 50%;.

I had to tweak a bit the .container and the .column height but it work with height: fit-content but it goes roughly like this

html, body { 
    font-family:Arial, Helvetica, sans-serif;
    background-color: black;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

.container {
    height: 100%;
    width:100%;
    display: flex;
}

.column {
    width:calc(100% / 3);
    height: 500px;
    background-size: cover;
    background-position: 50% 50%;
    transition: 0.3s;
}
.column:hover {
    transform: scale(105%);
}

<div class="row">
  <div class="container">
    <div class="column first" style="background-image: url(https://picsum.photos/400/400)"></div>
    <div class="column second" style="background-image: url(https://picsum.photos/401/400)"></div>
    <div class="column third" style="background-image: url(https://picsum.photos/402/400)"></div>
  </div>
</div>