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

我试图使网页与图像，有在中心的产品。但是产品被切断了，我必须向下滚动才能看到整个图像

如何使其加载以使图像居中

在身体中

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

我使用这个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");
    }

$（文档）.ready（函数（）
{   
如果（$（文档）.height（）<（.75*$（文档）.width（））{
var-wide=$（document.width（）；
如果（宽度>960）{
$（“#bgimage”）.css（“最小宽度”，宽+“px”）；
var高=.75*$（文档）.width（）；
$（“#bgimage”）.css（“最小高度”，高+px”）；
$（“#内容包装器”）.css（“宽度”，宽+“px”）；
$（“#内容包装器”）.css（“高度”，高+px”）；
}
}
if（$（文档）.height（）>=（.75*$（文档）.width（））{
var high=$（document.height（）；
如果（高>720）{
var宽=1.33*高；
$（“#内容包装器”）.css（“宽度”，宽+“px”）；
$（“#内容包装器”）.css（“高度”，高+px”）；
}

点击效果的更多代码（删除此问题…代码太多！）

}
$（窗口）。调整大小（函数（）
{
如果（$（窗口）.height（）<（.75*$（窗口）.width（））{
var-wide=$（window.width（）；
如果（宽度>960）{
$（“#bgimage”）.css（“最小宽度”，宽+“px”）；
var高=.75*宽；
$（“#bgimage”）.css（“最小高度”，高+px”）；
$（“#内容包装器”）.css（“宽度”，宽+“px”）；
$（“#内容包装器”）.css（“高度”，高+px”）；
}
}
if（$（文档）.height（）>=（.75*$（文档）.width（））{
var high=$（document.height（）；
如果（高>720）{
var宽=1.33*高；
$（“#内容包装器”）.css（“宽度”，宽+“px”）；
$（“#内容包装器”）.css（“高度”，高+px”）；
}
}
});

谢谢！！！：）

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

如果您的屏幕/浏览器窗口小于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;
    }



}

---

谢谢，所以我应该删除min height和min width？如果我这样做，似乎没有什么变化：（视情况而定。如果去掉mins，则图像是流动的，并根据其窗口大小进行调整。例如（）图像自然为1900x1200，但由于CSS，它会缩放到窗口（请注意调整窗口大小时）所以如果你真的想让那张照片合适，我就用100%的宽度，去掉最小值。

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



    });

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

@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;
    }



}

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