这是我对我的网站所需要的效果:
http://urban-walks.com/#nicer_way
不是花哨的一面-我有某些“节”或div的背景图片,我需要它们填充整个浏览器窗口。他们还需要在更改浏览器端(例如使用移动设备)时调整大小,以保持效果。
这是我当前每个div的代码-
HTML:
<div class="graph">
<br><h1>Latest SKE Graph</h1>
<img src="knowledge_graph.jpg">
</div>
CSS:
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 700px;
text-align: center;
}
最佳答案
将高度更改为“ 100vh”,将宽度更改为“ 100vw”。 v代表设备的视口。
.graph {
background-image: url("pexels-photo-279366.jpeg");
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
text-align: center;
}