Using CSS to Fit Images into an HTML Div

Below are two Div classes meant to display content side by side across a page

---

.left {
width: 50%;
float: left;
color: black;
display:block;
margin: 0 auto;
height: 300px;
border-radius: 10px;
box-shadow: 5px 5px 5px #000000;
}
.right{
float: left;
color: black;
display:block;
margin: 0 auto;
width: 50%;
height: 300px;
border-radius: 10px;
box-shadow: 5px 5px 5px #000000;
}

---

Here is the image class definition

img { object-fit: contain; display: inline-block; }

Here is the image that will appear in the left div.

<div class="left" title="Managing Shedule"> 
			
<img width="350px" src="slides/web1.png"/>

</div>