如何用圖像填充頁面？

我基本上是一個手機開發人員，並沒有關於網絡編程的知識。我想要做的是在我的移動應用程序的瀏覽器控件中以任意寬度和高度加載一個具有固定寬度（比如400px）和不斷增長的高度的圖像。該圖像應該完全填充瀏覽器控件而沒有任何空閒空間。如何用圖像填充頁面？

<script type="text/javascript"> 
    window.onload = function() { 
     var elem = document.getElementById('content'); 
     window.external.Notify(elem.scrollHeight + ''); 
    } 
</script> 
<div id="content"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
    <img src="http://www.reactiongifs.com/r/iwsyih.gif" /> 
</div>

這個，沒有用圖像填充頁面，而且它的寬度也不是400.謝謝。

來源

2014-02-25 user3293835

我不知道你通過瀏覽器控制的意思。一種方法是通過CSS使用和調整div元素的大小，並通過CSS屬性設置其背景圖像。

<div style=' /* more CSS */ background-image:url("foo.png");'></div>

例如看到http://www.w3schools.com/css/css_background.asp

來源

2014-02-25 17:13:24 mvw

您可以將某些樣式到您的代碼：

<style> 
image{ 
    position: absolute; 
    height :100% 
    width: 100%; 
} 
</style>

來源

2014-02-25 17:16:26

我猜測，由瀏覽器控件你的意思是窗口區域。如果是這樣，你可以設置一個background-image爲<body>標籤，使整個區域由於其填充到background-size: cover：

body { 
    background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    /* IE8 and older hack */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

這是一個新的CSS3功能，因此您必須使用瀏覽器特定的前綴（webkit，moz和o）。該解決方案在IE8及更高版本中無效，因此您需要添加filter黑客（請參閱代碼）。

HERE'S關於此方法的完整文章。

如文中所述，它可以是不安全的使用由於可能的滾動條提到filter方法IE和鏈接的問題。如果你遇到問題，你可以通過應用背景不<body>標籤，但一些<div>，你就會傳播100％的寬度和高度解決。在這種情況下，你必須記得要加100％的寬度和高度也爲html和body：

html, body { 
    width: 100%; 
    height: 100%; 
} 
#bg-image { 
    width: 100%; 
    height: 100%; 

    /* additional styles to let the div serve as a background, not spoiling the layout */ 
    position: absolute; 
    z-index: -1; 

    background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    /* IE8 and older hack */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

示例HTML：

<html> 
    <head> 
     (...) 
    </head> 
    <body> 
     <div id="bg-image"></div> 

     (...) 
    </body> 
</html>

來源

2014-02-25 17:22:52 matewka

我相信，你正在嘗試做的是更適合於CSS解決方案...下面我補充說，應解決您的問題的代碼。請記住，設置固定的寬度但改變高度並不是最好的想法，因爲圖像可能會變形。無論如何，我已經包括了設置背景圖片捂住內容容器的CSS。這裏是全代碼：

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
     <style> 
      /* # represents an id */ 
      #content{ 
       max-width: 400px; /* this is your restricted width that you are desiring */ 
       width: 100%; /* if you want the image to cover the whole screen regardless of the device */ 
       height: 100%; 
       background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
      } 
     </style> 
    </head> 
    <body>  
     <div id="content"> 
      <img src="http://www.reactiongifs.com/r/iwsyih.gif" /> 
     </div> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var elem = 
       document.getElementById('content'); 
       window.external.Notify(elem.scrollHeight + ''); 
      } 
     </script> 
    <body> 
</html>

正如你可能已經注意到我添加和標籤代碼，如果沒有這些代碼將不會按預期的行爲。 您應該可以複製並掃描此代碼。希望能幫助到你：）。

來源

2014-02-25 17:53:46

如何用圖像填充頁面？

回答

相關問題