Question

JSFiddle Demo

对于上面的JSFiddle演示，我需要定位最后一个图像，使其与前三个图像相比居中。

我该怎么做？

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()函数运行一次，以确定初始位置。

JSFiddle Demo

<强>使用Javascript：

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

使用jquery我认为你可以做到。

$(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
        });
    }

});

根据图像的大小定位图像

2 个答案: