Capping or auto adjusting size of image container

I’m trying to get an image to resize to roughly a quarter of the screen using a div container (or alternatively to cap the image height), but nothing I do seems to resize it. My code is below. I have tried fiddling with the container width and height and the image width and height but nothing changes, leading me to believe that there is CSS somewhere that is overriding my code. I also found this post (https://community.sawtoothsoftware.com/lighthouse-studio/post/tooltip-image-too-small-48YrKGjfC5MeAIW) and tried adding !important, but still nothing works.

As context, I have a 4 option multiple choice question and have an image to show with each option and I’d like for most of the images to show in the screen together. Right now they are giant (the original images are 1200x700 pixels).

Thanks

<html>

<head>

<style>

.container {

width: 25%;

height: 1px;

display: inline;

border: 0px;

}

img {

height: auto;

object-fit: contain;

}

</style>

</head>

<body>

</div>

</body>

</html>