How do I make an image fit css grid without the image expanding the size of the column?

Question

So I want to add an image to one of the middle columns in my grid.

The grid

But when i add the image the column expands

Grid with the image

How do scale down the image so that its width is the same as the columns width?

.game-box {
       position: relative;
       display: grid;
       grid-template-columns: 100px auto auto 100px;
       top: 50%;
       left: 50%;
       background-color: rgb(224, 142, 142);
       width: 900px;
       height: 700px;
       transform: translateX(-50%) translateY(-50%);
    
    }

 <figure class="image-box">
            <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.DYZMAUANlCkZudy3ecHIjgHaFj%26pid%3DApi&f=1" class="image">
 </figure>