Display image inside a 'div' and resize to a specific size

Question

I am developing a form and I am having some problems with image display and resize.

To make it better understood, I leave you with the image of what I have now, and what I want to achieve.

What I have now

What I want to achieve

Note that what I want is to resize the image and make it less tall, but not less wide, and centre it in the middle of the div parent.

And this is a part of the HTML file:

<div class="container rounded" style="background-color: rgb(228, 225, 225);">
    <br>
    <form id="editProductForm" class="needs-validation" novalidate style="padding: 15px 40px;">
        <div class="row">
            <div class="col-sm-6">
                <div class="row" style="margin-top: 5px;">
                    <div class="col-sm-9">
                        <div class="input-group mb-3">
                            //input group Número de producto
                        </div>
                        <div class="input-group" style="width: 100%;">
                            //input group Visible
                        </div>
                    </div>
                    <div class="col-sm-3"></div>
                </div>
                <br>
                <br>
                <br>
                <div class="row">
                    <div class="input-group mb-3">
                        //input group Nombre del producto *
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="row">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-8" style="padding: 0px; text-align: center;">
                        <img class="img" id="productimage">
                    </div>
                </div>
                <div class="row" style="margin-top: 5px;">
                    <div class="col-sm-4"></div>
                    <div class="col-sm-8" style="padding: 0px; text-align: end;">
                        <input type="file" class="form-control" id="inputImage" accept="image/*">
                    </div>
                </div> 
            </div>
            <div class="col-sm-1"></div> 
        </div>
    </form>            
</div>

EDIT: Adding CSS

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }

span.title { 
    background: #0bbe83;
    color: white;
    font-weight: bold;  
} 

.img{
    width: 70%;
}

/*To show the borders of the cell*/
.row > div {
    background: lightgrey;
    border: 1px solid grey;
}

EDIT: Solution

.img{
    width: 70%;
    height: 65%;
    object-fit: cover;
}

Result of changing

I hope someone can help me, please. Thanks