My image is not resizing properly within my CSS flexbox

Question

I created a flex container for my jpg file in html... when I go into css and add image dimensions, the image stays the exact same size with no changes at all

    </head>
    <div class="flex-container">
        <div class="row">
            <img src="images/1706810157558.jpg">
        "</div>
    <div></div>
    </div>

What I tried was doing

.img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.flex-container {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.container {
    display: flex;
    flex-direction: row;
}

I am making an about page for my design portfolio site, want face to be smaller But it still looks like this[this]http://127.0.0.1:5500/about.html

Answer 1

There were some syntax errors in the code you provided and a misuse of the object-fit within the .flex-container class. After fixing these, I can see the image is acting as it should be expected to. See the snippet below:

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

.flex-container {
  width: 300px;
  height: 300px;
}

.container {
  display: flex;
  flex-direction: row;
}

<div class="flex-container">
  <div class="row">
    <img src="https://www.w3schools.com/html/img_chania.jpg">
  </div>
</div>

If the snippet below isn't what you'd expect, describing in more detail what you are intending to do as a final result would help add clarity.