将图像扩展到最大可用宽度和高度
将图像扩展到最大可用宽度和高度
提问于 2019-06-10 00:47:54
屏幕截图
下面是一个可执行代码片段：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
);提前谢谢你
回答 1
Stack Overflow用户
发布于 2019-06-10 00:56:03
您可以尝试向.backIMG添加position: fixed
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56516521
复制相关文章
相似问题