如何使圖像始終加載在頁面中心？

我正在嘗試製作具有產品中心圖片的網頁。但產品被切斷，我不得不向下滾動才能看到整個圖像。如何使圖像始終加載在頁面中心？

你怎麼可以把它加載這樣的形象是中心？

體內

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



    });

謝謝！ :)

來源

2013-09-22 Naomi K

#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 queries調整基於窗口的大小了。

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



}

來源

2013-09-22 21:28:01 RCNeil

謝謝你，所以我應該去掉最低高度和最小寬度？如果我這樣做似乎沒有什麼改變:( –

這取決於如果你拿出分鐘，然後將圖像是流體並基於其窗口大小。例如（http://jsfiddle.net/7YhX5/）圖像自然是1900x1200的，但由於CSS的它（當你調整窗口大小通知）擴展到窗口。所以，如果你絕對要的是形象，以適應，然後我只想用100％的寬度和取出的最小值。 – RCNeil

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

來源

2013-09-22 21:51:28

如何使圖像始終加載在頁面中心？

回答

相關問題