图片高度自适应屏幕高度

Question

我有一个图片背景，希望它根据屏幕大小填充屏幕高度，无论是笔记本电脑、iPad、手机等设备。

我想让高度自适应屏幕高度。

.mobile-cover {
    background: url(http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/08/Modern-wallpaper-10.jpg) center top;
    background-position-x: 50%;
    border: red 0px solid;
    width: 100%;
    visibility: visible;
    height: 600px;
}

https://jsfiddle.net/tz2erwch/

- John107

---

背景大小: cover; 尝试一下，它会帮助你的。 - Nehemiah

谢谢你的帮助，但是没有解决我的问题！不过我已经解决了 :) - John107

Answer 1

没事了！我已经回答了自己的问题！

如果有其他人感兴趣，我只是简单地使用了

height: 100vh;

其中1vh等于视口高度的1%。

由于导航占据了屏幕的20％，因此我将其更改为80vh。这个方法很有效。

- John107

---

或者使用 height: 100%;。 - Kamil Powroźnik

height: 100vh 表示高度等于视口高度的百分之百。height: 100% 表示高度等于父元素高度的百分之百。它们略有不同... - John107

这只是一个例子，我们可以使用80%或其他任何值。但请记住，html，body标签必须具有width: 100%; height: 100%;。 - Kamil Powroźnik

Answer 2

试试这个：

background-size: cover;
background-position: center;

- Rakesh Chand