Question

图像应调整大小（最大值）但我需要导航div始终可见。当我调整浏览器大小时，它被隐藏了。理想情况下它应该随图像向上移动。

这是我已经拥有的代码。此外，有没有办法将图像放在屏幕的中央。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>        
</head>

    <body style="margin:0;padding:0; height:100%">
            <div style=" border:solid 1px green; ">           
                <img style="max-height:400px; height:100%;" src="../Images/img-02.jpg" />    
            </div>      
            <div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
    </body>

</html>

enter image description here

Answer 1

这可以使用一些脚本来纠正

<html>
<head>
<script type = "text/javascript">
window.onload = function(){
    var hVal = window.innerHeight;
    if(hVal>434){
        document.getElementById("test").height = 400;
    }
    else{
        document.getElementById("test").height = hVal-34;
    }
}
window.onresize = function(){
    var hVal = window.innerHeight;
    if(hVal>434){
        document.getElementById("test").height = 400;
    }
    else{
        document.getElementById("test").height = hVal-34;
    }
}
</script>
</head>
<body style="margin:0;padding:0; height:100%">
<div style=" border:solid 1px green; ">           
            <img id="test" src="../Images/img-02.jpg" />    
</div>      
<div style="border:solid 1px red;height:30px;position: relative;">navigation</div>
</body>
</html>

我希望它有效......！

中心图像并保持导航可见

1 个答案: