画像 リサイズ 中心を表示するには？

Question

###前提・実現したいこと
画像をウインドウサイズにリサイズをして中心を表示したいと思っています。

画像は横１２８０px 縦７２０px
でウインドウのサイズ、比率をjavascriptで取得してcssを書き換えるとういことをしています。
下記コードをにてリサイズはできているのではと思うのですが、
横長の画像のため中心がずれてしまいます。
リサイズしても中心を表示する方法を教えていただければ幸いです。

よろしくお願いします。
追記
画正方形のウィンドウだと横は必ずはみ出る
→はみ出る部分は表示しなくても大丈夫です。
その代わり常に中心を表示したいのです。（比率を保ち、中心を常に表示する）

###該当のソースコード

<div class="pc_top">
    <img src="common/img/pc_teaser.jpg" alt="">
    <a href="#" target="_blank"><div class="teaser_pc"></div></a>
</div>

$(window).on('load resize', function () {

    var w = $(window).width();
    var h = $(window).height();
    var imageW = 1280;
    var imageH = 720;
    var wRatio = imageW / imageH; //1.77
    var hRatio = imageH / imageW; //0.5625
    
    var stageRatio = w / h;
    var imageRatio = imageW / imageH;
    
    console.log(stageRatio, imageRatio);
    
    if(imageRatio>stageRatio){
        //winの縦に合わせる
        $(".pc_top img").css({
        height: h +"px",
        width: h * wRatio + "px"
        });
    }else{
        //winの横に合わせる
         $(".pc_top img").css({
        height: w * hRatio +"px",
        width: w + "px"
        });
    }
    

});

Comments

[flied_onion]

どういう表示にしたいのか、計算がよくわからないのですが、この計算ならたとえば正方形のウィンドウだと横は必ずはみ出る気がするんですが、それは意図した動作ですか？(stageRatioは1なので、横長画像なら必ずimageRatioが大きい。wRatioは1より大きいので、画像の横幅はhよりも大きくなる。しかしウィンドウは縦横同じなので、ウィンドウの横幅よりも画像の横幅の方がかならず大きくなる。）

Answer 1

やりたいことと合ってるかわかりませんが

.pc_top {
background: url(画像のパス) no-repeat 50% 50%;
background-size: cover;
}

で解決するのはどうでしょうか？
全体を覆いたい場合はcover、縦か横の大きい方をめいっぱいにするのはcontainです。

もし画像のURLが都度変わったりするのであれば、

<div class="pc_top" style="background-image:(画像のパス);">

でURLだけ変更できます。

Answer 2

こちらで解決できました。
回答いただいた皆さん、ありがとうございます

$(window).on('load resize', resizeHandler);

resizeHandler();    //リサイズ即時実行

function resizeHandler(){
    var w = $(window).width();
    var h = $(window).height();
    var imageW = 1280;
    var imageH = 720;
    var wRatio = imageW / imageH; //1.77
    var hRatio = imageH / imageW; //0.5625

    var stageRatio = w / h;
    var imageRatio = imageW / imageH;
    var wh =  w / 2;
    var hh =  h / 2;

    if(imageRatio>stageRatio){
        console.log("たて");
        
        $(".pc_top img").css({
            height: h, 
            width: h * wRatio,
            left:wh-(h*wRatio)/2,
            top:0
        });

    }else{
        console.log("よこ");

        $(".pc_top img").css({
            height: w * hRatio, 
            width: w,
            top:hh-(w*hRatio)/2,
            left:0
        });
    }
}

Answer 3

はみ出た場合は左右に均等にはみ出てほしいということですか？
（本来の目的は、ウィンドウの中央に画像の中央が来てほしい、ということだと思っています）

調整は必要かもしれませんが、例えばこういうことでしょうか？
(はみ出る分の半分だけ画面外に出してます）

    if(imageRatio>stageRatio){
        //winの縦に合わせる
        $(".pc_top img").css({
          position: 'absolute',
          height: h +"px",
          width: h * wRatio + "px",
          left: (Math.abs(h*wRatio - w) / 2) * -1 + "px"
        });
    }else{
        //winの横に合わせる
        $(".pc_top img").css({
          position: 'absolute',
          height: w * hRatio +"px",
          width: w + "px",
          top: (Math.abs(w*hRatio - h) / 2) * -1 + "px"
        });
    }