using css to "format" photos

OK – let’s pretend that I have a picture frame that’s 8.5″ by 11″. The frame size never changes. However, if the photo is 4″ by 6″, the photo needs to enlarge proportionally so that it fits the frame, and any part of the enlarged photo that sticks out from behind the frame is hidden. If the photo is 12″ by 18″, the center of the photo shows up in the frame and the rest of the photo is hidden. I know I can do this with css, but so far I haven’t been able to find the right code combination to achieve it. And for some reason, the css property object-fit does NOT work: in my custom css editor it always turns up as red text. I’ve also tried using flexbox but I ended up with a mess. I would be very grateful for any help I could get. Thanks! The site is https://www.picklestreetcreations.com/test_sandbox/ The problem is on the Hip-Hop page.