Safariが画像の高さを取得できないjs

Question

私のウェブサイトのカバーを作成しています。私はjsを使って画像を縦に中央に表示します。コード：

function middle(){ 
     var windowHeight=window.innerHeight; 
     var infographic=document.querySelector("#infographic img"); 
     var imgHeight=parseFloat(window.getComputedStyle(infographic).height); 

     infographic.style.maxHeight=(windowHeight-120)+"px"; 

     infographic.style.marginTop=(windowHeight-imgHeight)/2+"px"; 

     console.log(windowHeight); 
     console.log(imgHeight); 
     console.log(infographic.style.marginTop); 
     console.log(infographic); 
    } 
    middle(); 

すべてがChromeでうまくいきます。しかし、私がSafariでサイトを開くと、それはうまくいっていません。画像が一番下に表示され、「imgHeight」のコンソールログが0の場合は、コードを変更せずに、更新ボタンを押してください。

Answer 1

あなたはこのように、垂直方向と水平方向の中心に画像をflexを使用することができます。より速く、

.img-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

多くのクリーナー、ウィンドウのリサイズにスクリプトを再実行する必要はありません。注：上記の例では、画像はimg-containerの唯一の子で、img-containerはビューポートの幅と高さを取得します。例here。