I have an image contained in some divs. The image initially, on a widescreen monitor, sits in the central 50% of the viewport. When the browser window is shrunk down to the size of the image I then want the image to shrink with the viewport.

At the moment when the viewport reaches the image, the image just overflows outside the viewport view.

div{
font-size:15px;
color:#444;
font-family:sans-serif;
padding:0px;
}
.container {
display: flex;
 flex-direction: row;
flex-wrap:nowrap;
} 
.container2 {
border:1px solid black;
 display: flex;
flex-direction: column;
flex-wrap:nowrap;
margin:auto;
width:1000px;
} 
.container > div {
background-color: #d3d3d3;  
width:500px;
padding: 10px;
}
.divbox2 {
text-align: left;
width:1000px;
height:20px;
}
.divbox3 {
   background-color: #9bad65;  
  text-align: center;
width:1000px;
}

HTML

 
 <div class="container2">

 <div class="divbox2"></div> 

<div class="container">
 
   <div>Game:</div>
        <div>User:</div>     
    </div>
    
    <div class="divbox2">Big Lego is a feature of this game.</div>  
     <div class="divbox3"><img src="tillyimages/images/Terracotta Lego.jpg" loading="lazy" style="max-width: 100%"></div> 
     
     </div>

Here is the image in question

Image