位置画像のサイズJSFiddleデモ上記について

Question

JSFiddle Demo

に応じて、私は、それが最初の三つの画像と比較して、センタリングされるように、最後の画像を配置する必要があります。

どうすればよいですか？

position() 

window.onresize = function(event) { 
    position(); 
}; 

function position(){ 
    var id = document.getElementById("imageDisplay"); 

    console.log(window.innerWidth); 

     if(window.innerWidth > 400) { 
      console.log("left"); 
       id.style.left = "200px"; 
       id.style.bottom = 0; 
       id.style.top = "20px"; 
     } else if(window.innerWidth <= 250) { 
      console.log("left"); 
       id.style.left = "200px"; 
       id.style.top = "20px"; 
       id.style.right = 0; 
     } 
} 

Answer 1

このようにしますか？位置関数の内部で条件を記述することができます。if else ifの条件を参照してください。条件はウィンドウのサイズをチェックし、要素の位置を決定します。文書がロードされると、position()機能が1回実行され、初期位置が決定されます。

JSFiddle Demo

Javascriptを：私はあなたがそれを行うことができると思うのjQueryを使用して

position() 

window.onresize = function(event) { 
    position(); 
}; 

function position(){ 
    var id = document.getElementById("img"); 
    console.log(window.innerWidth); 
    if(window.innerWidth >800){ 
    console.log("left"); 
    id.style.left=0; 
    id.style.bottom=0; 
    id.style.top=""; 
    }else if(window.innerWidth >600){ 
    console.log("left"); 
    id.style.left=0; 
    id.style.top=0; 
    id.style.right=""; 
    }else if(window.innerWidth < 600){ 
    console.log("right"); 
    id.style.right=0; 
    id.style.top=0; 
    id.style.left=""; 
    } 
} 

Answer 2

。

$(window).load(function() { 
    //find height only after all elements have loaded 
    var widthOfImage = $('#image').width(); 
    //condition for image 
    if(widthOfImage < 200) { 
     $('#image').css({ 
      'position': 'absolute', 
      'top': 0, 
      'left': 0 
     }); 
    } else { 
     $('#image').css({ 
      'position': 'relative', 
      'top': 100, 
      'left': 100 
     }); 
    } 

});