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 所在的容器也可以通过这些属性确定这个最大/最小尺寸。

此外，您可以使用 media queries 而不是大量的 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;
    }



}