我正在尝试使图像扩展到页面的全部可用宽度和高度，一开始我实现了这一点，但我错了，因为当我向页面添加一些内容时，它的高度当然会增加，图像不会扩展以填充整个可用高度，所以我最终得到一个难看的空白。
截图:
这是一个可执行片段:https://codepen.io/Amoocris/full/vPWOpX
html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Murva Plan</title>
<link rel="stylesheet" href="style2.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="backIMg">
<div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div>
<div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div> <div class="from">
FROM :
<input type="time" class="inputTime" data-aos="fade-down" data-aos-duration="1600">
</div>
<div class="plansBackground">
<div class="Plans-container" data-aos="fade-up">
<div class="background-extand">
<h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1>
<h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1> <h1 class="day">
input
</h1>
</div>
</div>
</div>
</div>
<script src="script2.js" charset="utf-8"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Roboto;
font-weight: bold;
}
.backIMg {
background-color: rgb(155,230,170);
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url('https://images.unsplash.com/photo-1559967861-360333071389?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80')
}
.plansBackground {
background-color: rgba(255, 255, 255, .5);
overflow-y: auto;
width: 100vw;
height: 0;
position: relative;
bottom: 0;
left: 0;
transition: 1s;
color: black;
}
.height {
height: 25vw;
}
javascript
setTimeout(
function() {
document.querySelector(".plansBackground").classList.add("height");
}, 1000
);
提前谢谢你
最佳答案
你可以尝试在.backIMG中添加position: fixed
关于javascript - 将图像扩展到完整的可用宽度和高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56516521/