Css 如何让英雄形象占据全部屏幕高度100%

我只想让我的英雄形象符合100%的高度（我使用了500px的高度是小提琴，因为这就是它的工作原理，否则就没有输出），而不关心宽度，这样它就可以在台式机和手机上显示整个屏幕。我提到了其他问题，但它们并没有解决我的问题

这是小提琴：

html，正文{
身高：100%；
框大小：边框框；
保证金：0；
}
身体{
背景：url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg)无重复中心；
背景尺寸：封面；
}

只需将代码更新为高度：100vh并放置

背景尺寸：封面在背景速记属性之后

.hero-image{
    background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
}

我无法将图像放在正文上，因为它将显示在整个页面上。虽然我想要的输出在某种程度上是相同的，但在这个英雄图像之后，还会有其他元素。@umerjave，更新了答案。如果这不是你想要的，我不理解你的问题。vh和其他类似的单位被高估了。滚动条会有问题。
vh
是现代网络开发中解决此类问题的一种方式。它就像一个迷人的btw。但当我在手机上滚动一点时，图像的位置会有一点变化。我显然不想那样。我想你必须自己解决这个新问题。不过，我确实告诉过你如何解决最初问题。给了你答案一个记号。：）
.hero-image{
    background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
}