当我垂直调整浏览器大小时，我无法弄清楚如何解决我的图像在屏幕上移动的问题。此外，不仅我的图像在屏幕上移动，而且我的横幅文本和背景也会四处移动，这导致横幅文本从横幅上移开。
<!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;
}
最佳答案
横幅的文本没有相对于屏幕移动，但灰色背景在移动，因为您将其设置为屏幕高度的 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/