How to use resize, crop, and center an image using html or css only

Below I am writing about on how to display a small, large and proper image in a logo space in header. For example if I have a 500x500 pixel image,

I want to do the following things:

Resize that to a 250x250 pixel image
Make the actual visible image to be 100x100, but still have the scale of a 250x250 sized image.
Center of the image to be at a location x,y.

    .img_box {
       height: 120px;
       padding: 0;
       text-align: center;
       width: 120px;
       line-height:0px;
    }

    .img {
       max-height: 100%;
       max-width: 100%;
       position: relative;
       top: 50%;
       transform: translateY(-50%);
       -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
    }
  
    <div class="img_box">
        <img src="images/img.jpg" class="img">
    </div>