Question

我正在尝试使用包含产品的图片制作网页。但产品被切断，我必须向下滚动才能看到整个图像。

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

身体

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

css for element

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



}

Answer 2

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

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

2 个答案: