onWindowResizeを使用してサイズ変更時にコンテナを中央に配置する方法

Question

ウィンドウのサイズを変更するときに.containerのサイズを変更するスクリプトを使用しています。これは私のページです：http://cjehost.com/qt/nipt/page6.php

ブラウザウィンドウのサイズを変更すると、コンテナのサイズが変更されますが、中央に収まらないことがわかります。私のコンテナを集中させる方法はありますか？ここに私のスクリプトは次のとおりです。

\t // Resize the map to fit within the boundaries provided 
 

 
\t function resize(maxWidth, maxHeight) { 
 
\t var image = $('img'), 
 
\t  imgWidth = image.width(), 
 
\t  imgHeight = image.height(), 
 
\t  newWidth = 0, 
 
\t  newHeight = 0; 
 

 
\t if (imgWidth/maxWidth > imgHeight/maxHeight) { 
 
\t  newWidth = maxWidth; 
 
\t } else { 
 
\t  newHeight = maxHeight; 
 
\t } 
 
\t image.mapster('resize', newWidth, newHeight, resizeTime); 
 
\t } 
 

 
\t // Track window resizing events, but only actually call the map resize when the 
 
\t // window isn't being resized any more 
 

 
\t function onWindowResize() { 
 

 
\t var curWidth = $(window).width(), 
 
\t  curHeight = $(window).height(), 
 
\t  checking = false; 
 
\t if (checking) { 
 
\t  return; 
 
\t } 
 
\t checking = true; 
 
\t window.setTimeout(function() { 
 
\t  var newWidth = $(window).width(), 
 
\t  newHeight = $(window).height(); 
 
\t  if (newWidth === curWidth && 
 
\t  newHeight === curHeight) { 
 
\t  resize(newWidth, newHeight); 
 
\t  } 
 
\t  checking = false; 
 
\t }, resizeDelay); 
 
\t } 
 

 
\t $(window).bind('resize', onWindowResize);

マイCSS：

.container {margin:0 auto;} 

Answer 1

私は本当にこの1のためのCSSのアプローチの代わりに、JavaScriptのアプローチをお勧めします。 @mediaのクエリを使用したレスポンシブなCSSがあります。 JavaScriptのDOM操作を使用しないでください。実際にはパフォーマンス面でコストがかかります。あなたがオンライン網羅したリストを見つけることができます

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
} 

@mediaクエリ

@media screen and (max-width: 380px) { 
    // Styles for Mobiles 
} 
@media screen and (min-width: 381px) and (max-width: 760px) { 
    // Styles for Tablets 
} 
@media screen and (min-width: 761px) { 
    // Styles for Desktops 
} 

を中心に

CSS。

Answer 2

私はwindowを.container（私のコンテナdiv）に置き換えてこの作業をすることができました。それはまだちょっとちがうです。つまり、より小さな解像度からフルスクリーンに切り替えると、コンテナのサイズが常に変更されるわけではありません。ここに私の作業コードは次のとおりです。ここで

// Track window resizing events, but only actually call the map resize when the 
 
// window isn't being resized any more 
 

 
function onWindowResize() { 
 

 
    var curWidth = $('.container').width(), 
 
    curHeight = $('.container').height(), 
 
    checking = false; 
 
    if (checking) { 
 
    return; 
 
    } 
 
    checking = true; 
 
    window.setTimeout(function() { 
 
    var newWidth = $('.container').width(), 
 
     newHeight = $('.container').height(); 
 
    if (newWidth === curWidth && 
 
     newHeight === curHeight) { 
 
     resize(newWidth, newHeight); 
 
    } 
 
    checking = false; 
 
    }, resizeDelay); 
 
} 
 

 

 

 
$(window).bind('resize', onWindowResize); 
 
$(window).resize(onWindowResize); 
 

 

 
});

は作業フィドルです：enter link description here

私は、このアプローチへの参照を発見し、ここでいじる：@LBF

に enter link description here

感謝を