Question

我有一些相对简单的事情。我有一张应该显示在网页左侧的图片＆amp;它的高度应该是用户的屏幕尺寸。

我使用javascript将图片大小调整为用户屏幕高度。但它根本没有调整它的大小。功能运行但图像大小没有变化。

有没有办法将图片大小调整为用户屏幕高度＆amp;保持透视（使宽度成比例）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Kamalei - Home Page</title>
    <style type="text/css">
    <!--
        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: left;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 

        body { text-align: center;  background-color: RGB(255, 255, 255); margin: 20px; }

        #outerContainer { background-color: #DCFF9A; width: 100%; height: 100%; }
        #midContainer   { width: 100%; height: 100%; }
        #innerContainer { min-width: 1200px; }

    -->
    </style>

    <script type="text/javascript">
    <!--
        function getBrowserSize()
        {
            var res = {"width": 630, "height": 460};

            if (document.body) 
            {
                 if (document.body.offsetWidth)  res["width"]  = document.body.offsetWidth;
                 if (document.body.offsetHeight) res["height"] = document.body.offsetHeight;
            }

            alert( "A: "+res["height"] );
            if (window.innerWidth)  res["width"]  = window.innerWidth;
            if (window.innerHeight) res["height"] = window.innerHeight;
            alert( "B: "+res["height"] );

            return res;
        }

        function getScreenSize()
        {
            var res = {"width": 630, "height": 460};

            if ( parseInt(navigator.appVersion)>3 ) 
            {
                res["width"]  = screen.width;
                res["height"] = screen.height;
            }
            else if ( navigator.appName == "Netscape" && parseInt(navigator.appVersion)==3 && navigator.javaEnabled() ) 
            {
                 var jToolkit    = java.awt.Toolkit.getDefaultToolkit();
                 var jScreenSize = jToolkit.getScreenSize();
                 res["width"]  = jScreenSize.width;
                 res["height"] = jScreenSize.height;
            }

            return res;
        }

    -->
    </script>

</head>
<body>

    <div id="outerContainer">

        <div id="midContainer">

            <img id="kamaleiText" src="images/kamaleiText.png" alt="" />

            <div id="innerContainer">
                <p>abcd</p>
            </div>

        </div>

    </div>

    <!-- Run page load scripts -->
    <script type="text/javascript">
    <!--
        //window.onresize = setBackgroundImgWidth;
        alert("C: "+document.getElementById( "kamaleiText" ).offsetBottom);
        document.getElementById( "kamaleiText" ).offsetBottom = getBrowserSize()["height"] + "px";
        alert("D: "+document.getElementById( "kamaleiText" ).offsetBottom);

        // after this the pictures height hasn't changed, its the same size when it should be the height of the users screen.
    -->
    </script>

</body>
</html>

Answer 1

请参阅CSS-Tricks中的这篇文章*：Perfect Full Page Background Image

Answer 2

这实际上非常简单。只需使用：

<img src="http://image_url" style="height: 100%;" />

如果需要，您可以绝对定位图像或其他任何内容。我们的想法是，如果您指定width或height而不是另一个，则会自动按比例调整其他属性。不需要javascript。

注意：一般来说，发布整个代码是不好的做法。

将图像调整到屏幕高度但保持比例

2 个答案: