我尝试在vh
中给出图像的高度。它以1600X900
分辨率和1920*1080
分辨率工作,页面中没有任何空格或滚动。
但是1366X768
分辨率中,它会在页面中滚动。
<img class="layout-img">
.layout {
height: 90vh;
}
我也尝试给出最小身高并根据viewport
缓慢生长
.layout {
height: calc(550px +2vh);
}
你能建议我需要使用哪个css
装置吗?
没有滚动和图像的布局将适合每个屏幕。
.body-noscroll{
margin:0px;
overflow:hidden;
}
.full-width-image{
width:100vw;
height:100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Noscroll</title>
</head>
<body class="body-noscroll">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" class="full-width-image">
</body>
</html>
如果您的图像较大,则没有滚动条,那么可以通过添加 overflow: hidden; 到图像父级来简单地完成视口。请参阅jsFiddle:https://jsfiddle.net/zk3Lbo87/
section {
display: block;
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
img {
position: absolute;
width: auto;
height: 100%;
left: 50%;
transform: translateX(-50%);
}