Resizing an image to the height of the screen but maintain proportion_问答_开发者

Resizing an image to the height of the screen but maintain proportion

开发者 https://www.devze.com 2023-03-16 06:15 出处：网络

I have something relatively simple to do. I have a picture that should be displayed on the left side of the webpage & its height should be the users screen size.

相关专题：css javascript

I have something relatively simple to do. I have a picture that should be displayed on the left side of the webpage & its height should be the users screen size.

I use javascript to resize the image to the users screen height. But its not resizing it at all. The functions run but the image size doesnt change.

Is there a way to resize the image to the users screen height & to keep the perspective(so that the width will be in proportion)?

<!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>

This is actually pretty easy. Just use something like:

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

You could absolutely position the image or whatever if need be. The idea is that if you specify either width or height but not the other, it automatically adjusts the other property proportionally for you. No javascript needed.

Note: In general it's bad practice to post your entire code.