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

-1

我只想让我的英雄形象适合100％的身高（我使用过500px的高度，因为这是它的工作方式，否则就是无输出），而不是关心宽度，以便在桌面和手机上进行全屏显示。我提到了其他问题，但他们没有解决我的问题。如何让英雄形象占据屏幕的全部高度100％

.hero-image{ 
    background-size: cover; 
    background: url(http://www.intrawallpaper.com/static/images/hd_wallpapers_gg3.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    height: 500px; 
    -o-background-size: cover;}

来源

2016-02-13 Umer Javed

只需将您的代码更新为height: 100vh;，并将background-size: cover;置于您的背景速记属性之后。

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

https://jsfiddle.net/qrgLvaue/1/

来源

2016-02-13 09:29:13 connexo

vh和其他这样的单位被高估。在滚动条的情况下会出现问题。 – Qwertiy

'vh'是现代网络开发中应对这类问题的方法。 – connexo

它像一个魅力顺便运作。但是，当我在移动设备上滚动一点时，图像的位置会发生一些变化。我不希望这种方式显而易见 –

html, body { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

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

html, body { 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    overflow: auto; 
 
    counter-reset: i; 
 
} 
 

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

 
div:after { 
 
    counter-increment: i; 
 
    content: counter(i); 
 
    color: white; 
 
    font-size: 10em; 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

来源

2016-02-13 09:22:44 Qwertiy

我不能把图像上身体，因为它会显示整个网页。 –

虽然我想要的输出在某种程度上是相同的，但在这张英雄图像之后还会有其他元素。 –

@UmerJaved，更新了答案。如果这不是你想要的，我不明白你的问题。 – Qwertiy

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

回答

相关问题