imgタグをbackground:coverと同様の動きをさせる

PC表示時の記述

<!--HTML-->
<div class="wrapper">
   <img src="xxxxx.jpg">
</div>

<!--CSS-->
<style>
.wrapper {
   height:100vh; // 高さを指定する
   position:relative;
   overflow:hidden;
}
.wrapper img {
   width: auto;
   height: auto;
   min-width: 100%;
   min-height: 100%;
   max-width: inherit;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
</style>

MB表示時の記述

モバイルの時に、画像が大きくなってしまうことがある。
画像の比率をもう少し小さくしたい場合はimgを少し大きくして調節する

@media screen and (max-width:780px) { 

    .wrapper {
       height:100vw; // 高さを指定する       
     }
     .wrapper img {
       width: 150％; //画像サイズが調節できる
     }
}

heightの調節は表示させたい高さで設定する。
imgの外のdivをrelativeにし、overflow:hidden;することによって、中のimgを自由自在に位置変更することができる