个人中心
gpt4 book ai didi

html - 缩放问题 - CSS

转载 作者：行者123 更新时间：2023-11-28 02:55:00 26 4
gpt4 key购买 nike

当我垂直调整浏览器大小时，我无法弄清楚如何解决我的图像在屏幕上移动的问题。此外，不仅我的图像在屏幕上移动，而且我的横幅文本和背景也会四处移动，这导致横幅文本从横幅上移开。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A-level Revision Website</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
    <div class="banner">
        <h1>A-Level Revision Website</h1>
    </div>
    <div>
        <form id="loginForm">
            <input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br>
            <input type="password" class="login-password" required="true" placeholder="Password" /><br>
            <input type="submit" name="Login" value="Login" class="login-submit" /><br>
            <a href="#" class="login-forgot-pass">forgot password?</a>
        </form>
    </div>
    <div id="imagesMain">
        <a href="Maths.html">
            <img src="images/Maths.jpg" alt="Maths">
        </a>
        <a href="ComputerScience.html">  
            <img src="images/Computer_Science.jpg" alt="ComputerScience">
        </a>
        <a href="Physics.html">  
            <img src="images/Physics.jpg" alt="Physics">
        </a>
    </div>
</html>

.banner{
    position: absolute;
    width: 100%;
    height: 25%;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color: #595959;
    color: #fff;
    text-align: center;
    line-height: 180px;
    font-family: 'Lato', sans-serif;
    font-size: 25px;
}

#imagesMain{
    position: absolute;
    max-width: 75rem;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    padding: 0;
    margin: 20px auto;
    text-align: center;
}

#imagesMain a{
  width:30%;
  float:left;
  position:relative;
  margin:1.5%;
}

img{
    max-width: 100%;
    height: auto;
    margin-right: 25px;
    position: relative;
}

body, html {   
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
}
form {
    display:table;
    margin:auto;
}

https://jsfiddle.net/zntzep48/7/

最佳答案

横幅的文本没有相对于屏幕移动，但灰色背景在移动，因为您将其设置为屏幕高度的 25%。当您调整窗口的高度时，横幅也会相应调整。只需完全删除 height 属性即可。删除行高并设置 padding-top。将横幅设置为相对位置，因为它会覆盖表单。

添加

#form {
    display: table;
    margin: 0 auto;
}

并将表单的 div 更改为该 ID。删除你放在 body 和 html 中的 table-cell table-display。

将#imagesMain 更改为 position: relative。

工作解决方案:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A-level Revision Website</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<style>
.banner{
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color: #595959;
    color: #fff;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 25px;
    padding-top: 50px;
}

#imagesMain{
    position: relative;
    max-width: 75rem;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    padding: 0;
    margin: 20px auto;
    text-align: center;
}

#imagesMain a{
  width:24%;
  float:left;
  margin:1.5%;
}

img{
    max-width: 100%;
    height: auto;
    margin-right: 25px;
    position: fixed;
    bottom:0;
}

body, html {   
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    vertical-align:middle;
}
#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50%;
}
</style>

<body>
    <div class="banner">
        <h1>A-Level Revision Website</h1>
    </div>

    <div id="form">
        <form id="loginForm">
            <input type="email" class="login-username" autofocus="true" required="true" placeholder="Email" /><br>
            <input type="password" class="login-password" required="true" placeholder="Password" /><br>
            <input type="submit" name="Login" value="Login" class="login-submit" /><br>
            <a href="#" class="login-forgot-pass">forgot password?</a>
        </form>
    </div>

    <div id="imagesMain">
        <a href="Maths.html">
            <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Maths"">
    </a>
        <a href="ComputerScience.html">  
            <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="ComputerScience">
    </a>
        <a href="Physics.html">  
            <img src="https://i.pinimg.com/originals/06/9a/c8/069ac81cbe0e3a6f8fb43a0df42125a0.jpg" alt="Physics"">
        </a>
    </div>
</body>
</html>

编辑:编辑代码以在页面中间制作表单并将图像放在页面底部(它们会随着调整大小而移动)。

关于html - 缩放问题 - CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46505775/

26 4 0
文章推荐： javascript - js在重复 Action 中的意外行为
文章推荐： css - 使用 v-for 指令插入时 Vue 不应用样式
文章推荐： jquery - addClass() 成功，更改未应用于页面元素
文章推荐： javascript - 完整背景 youtube 视频 - fullpage.js
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com