我需要使用哪个 css 单元,以便页面中不会滚动所有分辨率(基本笔记本电脑分辨率和 1920X1080 FHD 分辨率)



我尝试在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%);
}

最新更新