图像高度调整到屏幕高度

时间:2016-10-27 10:44:10

标签: html css image height screen

所以我有一个图像背景,我希望它根据屏幕尺寸,笔记本电脑,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/

2 个答案:

答案 0 :(得分:3)

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

对于任何感兴趣的人我只是使用

  

身高:100vh;

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

我改为80vh,因为导航占据了20%的屏幕。这很有效。

答案 1 :(得分:0)

试试这个: -

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