佬们，想问下前端界面实现的问题

开发调优
1

这个是界面展示：https://maodeyu.fun/
想让图片在h1跟底部button中间的位置 且图片等比拉伸到宽高
该怎么写啊，位置怎么调都不咋对。
下边是原始代码

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaoDeYu</title>
    <!-- Materialize CSS -->
    <link href="./css/materialize.min.css" rel="stylesheet">
    <style>
        body, html {
            background-color: black;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
        .fixed-action-btn {
            position: fixed;
            top: 20px;
            right: 50px;
        }
        #load-image-btn {
            text-align: center;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        #image-display {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            max-width: 100%;
            max-height: calc(100vh - 120px);
            margin-top: 120px;
            object-fit: contain;
            text-align: center;
        }
        .top_title {
            position: fixed;
            margin: 0;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
        }
        .img_title {
            position: fixed;
            color: #2bbbad;
            right: 70%;
            font-size: 28px;
            margin-top: 60px;
        }

    </style>
</head>
<body>
<div class="img_title">
    Pick你最喜欢的今日壁纸
</div>
<div class="top_title" style="margin-top: 50px; height: 80px">
    <h2 style="color: white;padding: 0;margin: 0">猫的于</h2>
</div>
<img id="image-display" src="" alt="My Cat"/>

<button id="load-image-btn" class="btn waves-effect waves-light">换个壁纸</button>
<div class="fixed-action-btn">
    <a href="https://blog.maodeyu.fun" target="_blank">
        <button id="blog_btn" class="btn waves-effect waves-light"> Blog</button>
    </a>
</div>


<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/myScript.js"></script>
<!-- Materialize JS -->
<script src="./js/materialize.min.js"></script>

</body>
2 
   background: url();
   background-size: cover;
  background-repeat: no-repeat;
3

h1在哪呢

4

改好了，外边包一层，然后全固定就可以。下边是改完的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MaoDeYu</title>
    <!-- Materialize CSS -->
    <link href="./css/materialize.min.css" rel="stylesheet">
    <style>
        body, html {
            background-color: black;
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
        }
        .fixed-action-btn {
            position: fixed;
            top: 20px;
            right: 50px;
        }
        #load-image-btn {
            text-align: center;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
        }
        #image-display {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            object-fit: contain;
            text-align: center;
        }
        .top_title {
            position: fixed;
            margin: 0;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
        }
        .img_title {
            position: fixed;
            color: #2bbbad;
            right: 70%;
            font-size: 28px;
            margin-top: 60px;
        }
        .imgDiv{
            position: fixed;
            margin-top: 120px;
            width: 100%;
            height: calc(100vh - 180px);
        }
    </style>
</head>
<body>
<div class="img_title">
    Pick你最喜欢的今日壁纸
</div>
<div class="top_title" style="margin-top: 30px; height: 80px">
    <h2 style="color: white;padding: 0;margin: 0">猫的于</h2>
</div>

<div class="imgDiv">
    <img id="image-display" src="" alt="My Cat"/>
</div>
<button id="load-image-btn" class="btn waves-effect waves-light">换个壁纸</button>
<div class="fixed-action-btn">
    <a href="https://blog.maodeyu.fun" target="_blank">
        <button id="blog_btn" class="btn waves-effect waves-light"> Blog</button>
    </a>
</div>


<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./js/myScript.js"></script>
<!-- Materialize JS -->
<script src="./js/materialize.min.js"></script>

</body>
</html>
5

From 快问快答 to 开发调优