Why doesn't "object-fit: cover;" work in this scenario?

Question

I'm working on my own post-grad portfolio and I really enjoyed coding the one freecodecamp taught me. Instead of using all of the projects they taught me, I decided to use others that I learned.

Long story short, for this layout I screenshotted the homepage for one of my projects on my mac and cropped out the UI of my mac & chrome. I saved the file and inserted the image to my portfolio, but it came out like this:

The screenshot

As you can see, all of the other thumbnails came out perfectly fine, but mine came out stretched for some reason, not fitting into the grid.

HTML Code for my particular image

 <a href="Yummy Eats/index.html" target="_blank" class="project project-tile">
            <img class="project-image" src="../images/yummypreview.jpeg" alt="project" />
            <p class="project-title">
                <span class="code">&lt;</span>
                yummy.eats
                <span class="code">&#47;&gt;</span>
            </p>
        </a>

CSS Code for all of them:

.project-image {
    height: calc(100% - 6.8rem);
    width: 100%;
    object-fit: cover;
}

I tweaked around for awhile, gave it it's own class and found that

object-fit: fill;

was able to fit the whole thing into the grid. It looked good in the mobile layout, but it looked very poor in the desktop/tablet versions in terms of image quality.

max-height: 100%;

also worked with object-fit:cover; , but of course without the calc, it threw off my grid layout.

I'm still fairly new so it could be a rookie mistake that I'm just not seeing.