以下サンプル

以下css

.box{
position : relative;
display : block;
width : 40%;
height : auto;
background : #000;
}
.child_box{
position : relative;
display : block;
width : 100%;
height : 100%;
}
.child_box:before{
content : "";
position : relative;
display : block;
padding-top : 100%;
}
.child_box img{
position : absolute;
display : block;
width : 100%;
height : 100%;
top : 0;
object-fit: cover;
object-position:center center;
font-family:'object-fit:cover; object-position: center center;';

以下html

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>
<script>
	objectFitImages('img.obj');
</script>
<div class="box">
<span class="child_box">
<img src="XXXXX.jpg" alt="" class="obj">
</span>
</div>

object-fitを使うことにより縦横比を維持したままトリミングできます。

font-family:’object-fit:cover; object-position: center center;’;を使うことによりIEやEdgeに対応させます。
使用する場合はスクリプトの呼び出しと実行をしてください。

pading-topを75%に変えてやるとアスペクト比4:3や、56.25%に変えてやるとアスペクト比16:9などで固定してレスポンシブ化できる