jquery - 如何使图像始终加载在页面中心？

Question

我正在尝试使用以产品为中心的图像制作网页。但是产品被切断了，我必须向下滚动才能看到整个图像。

如何让它加载，使图像居中？

在身体里

<img alt="The Argan Tree Product Line" src="images/products2.jpg" id="bgimage" class="mainimage"/>

元素的 css

#bgimage{
  z-index: -999;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  position: relative;
min-width:960px;
min-height:720px;
}

当浏览器大小不同时，我正在使用这个 jquery 来改变图像大小

$(document).ready(function()
{   
    if ($(document).height() < (.75 * $(document).width())){
        var wide = $(document).width();
        if (wide>960){
        $("#bgimage").css("min-width", wide + "px");
        var high = .75 * $(document).width();
        $("#bgimage").css("min-height", high + "px");
        $("#content-wrapper").css("width", wide +"px");
        $("#content-wrapper").css("height", high +"px");
    }
    }

    if ($(document).height() >= (.75 * $(document).width())){
        var high = $(document).height();
        if (high>720){
        var wide = 1.33 * high;
        $("#content-wrapper").css("width", wide +"px");
        $("#content-wrapper").css("height", high +"px");
    }

更多代码在这里点击效果（删除这个问题......太多的代码！）

}
    $(window).resize(function()
    {
        if ($(window).height() < (.75 * $(window).width())){
            var wide = $(window).width();
            if (wide>960){
            $("#bgimage").css("min-width", wide + "px");
            var high = .75 * wide;
            $("#bgimage").css("min-height", high + "px");
            $("#content-wrapper").css("width", wide +"px");
            $("#content-wrapper").css("height", high +"px");
            }
        }

        if ($(document).height() >= (.75 * $(document).width())){
            var high = $(document).height();
            if (high>720){
            var wide = 1.33 * high;
            $("#content-wrapper").css("width", wide +"px");
            $("#content-wrapper").css("height", high +"px");
            }
            }



    });

谢谢！！！:)

Answer 1

#bgimage { 
   display:block;
   width:100%;
   max-width:100%;
   height:auto;
   margin:0px auto;
   position:relative;
   min-width:960px;
   min-height:720px;
}

使用此方法，图像将居中且流畅（因此它将根据您的浏览器或容器大小自动调整）。

如果您的屏幕/浏览器窗口小于 960x720，那么您必须删除这些最小属性并让它保持流畅。内部的容器也#bgimage可以通过这些属性确定这个最大/最小尺寸。

此外，您也可以使用媒体查询来根据窗口调整大小，而不是使用很多 JS。

@media all and (max-width:960px) {

     #bgimage { 
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        margin:0px auto;
        position:relative;
        min-width:480px;
        min-height:360px;
    }



}

Answer 2

#bgimage {    
    margin: 0 auto;
    width: px ore %;
    }