How to fit an image inside a fixed size div

Question

I have a div containing two divs: One for image(30%) and one for text(70%) Inside the image div, i am fitting my img. I want the img(image-container) inside the image div(img-banner) to:-

1. Not exceed outside the div, it should fit in
2. Should not be blur
3. I don't mind if it is smaller but it should maintain aspect ratio and not look blur
4. Should be center of the div

This is my html code in react:

const imageCssClass = () => {
        let max_image_object = {
            banner_div: 'image-banner-div',
            image_container : 'image-container',
            img : 'img-banner',
            title_container : 'title-container',
            title_ellipsis : 'title-ellipsis'
            
        }
        let min_image_object = {
            banner_div: 'image-small-banner-div',
            image_container : 'image-small-container',
            img : 'img-small-banner',
            title_container : 'title-small-container',
            title_ellipsis : 'title-small-ellipsis'
        }
        return imageObjectArray.length<3 ? max_image_object : min_image_object;

    }

...
...
 {imageObjectArray.length!=0 && imageObjectArray.map((obj,ind) => (  
                                <div className={imageCssClass().banner_div}>
                                    <div className={imageCssClass().image_container}>
                                        <center>
                                            <img className={imageCssClass().img} src={(common.isValidHttpUrl(obj.imageUrl) && common.isValidImage(obj.imageUrl))? obj.imageUrl : unavailable_image}></img>
                                        </center>
                                    </div>
                                    <div className={imageCssClass().title_container}>
                                        <headline>{filterTitleAttribute(obj.imageTitleAttribute)}</headline><br></br>
                                        <div className={imageCssClass().title_ellipsis}> {obj.imageTitle ? obj.imageTitle : textUnavailable }</div>
                                        <span className='title-tooltiptext'>{ obj.imageTitle ? obj.imageTitle : textUnavailable }</span>
                                    </div>
                                </div>))}

This is my CSS code:

/* Image divs for maximised images with full title visibility - begin */

.image-banner-div{
  margin: auto;
  margin-bottom: 30px;
  width: 500px;
  height: 200px;
  vertical-align: middle;
  border: 1px solid #cccccc;
  box-shadow: 5px 5px 10px #888888;
}

.image-container{
  float: left;
  width: 40%;
  height: 200px;
  display:flex;
  align-items: center;
}

.img-banner{
  width: 196px;
}

.title-container{
  float: right;
  width: 60%;
  height: 200px;
  padding-top: 10px;
  padding-left:20px;
  overflow-wrap: break-word;
} 

.title-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 165px;
  cursor: pointer;
  font-size: 80%;
  font-weight: 400;
  line-height: 1.8;
  margin-right: 10px;
}

/*  Image divs for maximised images with full title visibility - end */

/*  Image divs for minimized images - begin */

.image-small-banner-div{
  margin: auto;
  margin-bottom: 20px;
  width: 500px;
  height: 122px;
  vertical-align: middle;
  border: 1px solid #cccccc;
  box-shadow: 5px 5px 10px #888888;
}

.image-small-container{
  float: left;
  width: 30%;
  height: 122px;
  display:flex;
  align-items: center;
  justify-content: center;
}

.img-small-banner{
  width: 116px;
}

.title-small-container{
  float: right;
  width: 70%;
  height: 120px;
  padding-top: 5px;
  padding-left:10px;
  overflow-wrap: break-word;
} 

.title-small-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 90px;
  cursor: pointer;
  font-size: 80%;
  font-weight: 400;
  line-height: 1.8;
  margin-right: 10px;
}

/*  Image divs for minimized images - end */

See the below image for reference: The image in second banner is overflowing: enter image description here

I tried multiple solutions but could not succeed.

Image(img-banner) should fit inside the image-container and not overflow. I don't mind if it is smaller as well.

Things i tried:

1. using object-fit
2. using max-height or max-width
3. using display:block or display:inline-block

But none of them were successful. I found the images overflowing in all cases. Can someone shed some light here? Thanks