vamos pegar por exemplo esta imagem.:

Ela tem 512 x 512, então vamos colocar a mesma dentro de um contêiner de 256 x 128
.box {
float: left;
width: 256px;
height: 128px;
margin: 10px 5px;
border-radius: 5px;
box-shadow: 0px 0px 10px black;
overflow: hidden;
}
.bg {
background-image: url('https://image.flaticon.com/icons/png/512/944/944939.png');
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
.img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="box">
<div class="bg"></div>
</div>
<div class="box">
<img src="https://image.flaticon.com/icons/png/512/944/944939.png" class="img" />
</div>
Ou seja, podemos fazer este posicionamento utilizando o background-size: cover; background-position: center;
para imagens em background ou o object-fit: cover;
para imagens.
agora se você quiser manter a proporção da imagem e não corta-la, poderá usar o contain
ao invés do cover
.
.box {
float: left;
width: 256px;
height: 128px;
margin: 5px 5px;
border-radius: 5px;
box-shadow: 0px 0px 10px black;
overflow: hidden;
}
.bg {
background-image: url('https://image.flaticon.com/icons/png/512/944/944939.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
}
.img {
object-fit: contain;
width: 100%;
height: 100%;
}
<div class="box">
<div class="bg"></div>
</div>
<div class="box">
<img src="https://image.flaticon.com/icons/png/512/944/944939.png" class="img" />
</div>