调整到屏幕高度的图像高度

Question

所以我有一个图像背景，我希望它根据屏幕尺寸、笔记本电脑、ipad、phone 等来填充屏幕的高度

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

.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/

Answer 1

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

对于其他感兴趣的人，我只是使用

height: 100vh;

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

我更改为 80vh，因为 20% 的屏幕被导航占用。这很好用。

Answer 2

试试这个：-

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

调整到屏幕高度的图像高度

Image height to adjust to screen height

html

css

image

height

screen