How to use object-fit: contain;

[Ahr Aitch]

I have an area of one of my screen designs reserved for a photo. In CSS I defined the width and height as 245px each then used the object-fit: contain; selector. I made no changes in my HTML. My understanding is that object-fit: contain should cause any image coded in HTML with that DIV class to be fitted to the space defined for that DIV class, but this is not working for me. The images display as their actual size without regard to the size of the container defined by CSS. Do I misunderstand how this is supposed to work?

If anyone can tell me what I'm doing wrong, I'd very much appreciate it. I've searched, watched YTs and even ran both my CSS and HTML code through validators without finding any problem. My images are stored in an 'images' sub-folder within my project folder and are referenced (properly, I think) with "images/filename" in the HTML.

HTML:

<div class="item2">
<img src="images/filename">
</div>

There is no declaration of width and height in HTML for the image to be displayed. The actual images vary from 480x480px to 600/500px.

CSS:

.item2
{
grid-area: photo
width: 245px;
height: 245px;
margin-top: 5px;
margin-left: 70px;
border-style: ridge;
border-width: 2.5px;
border-radius: 5px;
padding: 6px;
object-fit: contain;
}