Question

我基本上是一名电话开发人员，对网络编程一无所知。我正在尝试做的是在我的移动应用程序的浏览器控件中加载任何宽度和高度的图像，具有固定的宽度（比如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.谢谢。

Answer 1

我不确定您的浏览器控制是什么意思。一种方法是通过CSS使用和调整div元素的大小，并通过CSS属性设置其背景图像。

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

例如，请参阅http://www.w3schools.com/css/css_background.asp

Answer 2

你可以为你的代码添加一些样式：

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

Answer 3

我猜测通过浏览器控件你的意思是窗口区域。如果是这样，您可以为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 hack（请参阅代码）。

HERE'S 关于此方法的完整文章。

正如文章所解释的那样，由于可能存在滚动条和链接问题，因此对IE使用上述filter方法可能不安全。如果您遇到问题，可以通过将背景应用于<body>标记，但将其应用于您将以100％宽度和高度展开的某些<div>来解决问题。在这种情况下，您必须记住为html和body添加100％的宽度和高度：

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>

Answer 4

我相信您尝试做的更适合 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>

您可能已经注意到我已将和标记添加到您的代码中，如果没有这些标记，您的代码将无法按预期运行。 您应该可以复制并通过此代码。希望它有所帮助:)。

如何用图像填充页面？

4 个答案: