有没有办法在调整浏览器窗口大小时防止页面元素调整大小？例如，我希望“矩形”元素的宽度和高度保持不变，无论浏览器窗口的大小如何。
<!DOCTYPE html>
<html>
<head>
<title>Kirjautuminen</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<style>
body {
font-family: Roboto, sans-serif;
font-size: 1vw;
margin: 0;
padding: 0;
background-color: black;
min-height: 100vh;
height: 1000px;
width: 1000px;
}
.username input {
position: absolute;
left: 50vw;
top: 45vh;
transform: translateX(-50%);
width: 250px;
height: 20px;
}
.password input {
position: absolute;
left: 50vw;
top: 50vh;
transform: translateX(-50%);
width: 250px;
height: 20px;
}
.modern-button {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 150px;
margin: 0 10px 10px 10px;
}
.modern-button:hover {
background-color: #ddd;
}
.submit-button input{
position: absolute;
left: 50vw;
top: 55vh;
transform: translateX(-50%);
width: 5vw;
height: 3vh;
}
img {
width: auto;
height: 100vh;
display: block;
margin: 0 auto;
position: absolute;
left: 0;
top: 50;
z-index = -1;
}
label {
color: white;
margin-right: 100px;
}
.header {
position: relative;
left: 50vw;
top: 20vh;
text-align: center;
transform: translateX(-50%);
z-index: +1
}
.paragraph1 {
position: absolute;
left: 50vw;
top: 39vh;
transform: translateX(-50%);
z-index: +1
}
.rectangle {
position: absolute;
width: 400px;
height: 23vh;
background-color: #808080;
border-radius: 30px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
h1 {
color: white;
font-size: 50px;
}
h2 {
color: white;
}
p {
color: white;
font-size: 20px;
}
::placeholder {
font-size: 20px;
text-align: left;
}
</style>
</head>
<body>
<div style="min-width: max-content; min-height: max-content;">
<div class = "rectangle"></div>
<form action="/home" method="POST">
<div class = "username">
<input type="username" id="username" name="username" style="border-radius: 5px; padding: 0.25%;" placeholder="Käyttäjätunnus"><br>
</div>
<div class = "password">
<input type="password" id="password" name="password" style="border-radius: 5px; padding: 0.25%;" placeholder="Salasana"><br>
</div>
<div class = "submit-button">
<input type="submit" value="Kirjaudu">
</div>
<div class = "header">
<h1>mywebpage.net</h1>
</div>
<div class = "paragraph1">
<p>Kirjaudu sisään:</p>
</div>
</form>
</div>
</body>
</html>
我尝试过使用像素而不是百分比，但显然不起作用。我还尝试将元素放入 div 元素内并将 div 元素的宽度和高度设置为 1000px，但它也不起作用。解决方案一定很简单，但我无法在网上找到答案，Chat GPT 也无法给我答案。谢谢！
CSS 具有“max-width”、“max-height”、“max-inline-size”和“max-block-size”属性 - 以及最小尺寸的逆属性。如果您以 px 为单位定义最小和最大尺寸，则无论您增大或减小浏览器窗口的尺寸，它都应该无法更改尺寸。