Question

我只是希望我的英雄形象能够达到100％的高度（我使用500px的高度是小提琴，因为它的工作方式不然只是输出）并且不关心宽度所以需要桌面和手机上的整个屏幕。我提到了其他问题，但他们并没有解决我的问题。

.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;}

Answer 1

只需将您的代码更新为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/

Answer 2

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何让英雄形象占据所有屏幕高度100％

2 个答案: