我正在构建一个网页，我有一个横跨整个屏幕的背景图像。当按 ctrl 和 -（或 ctrl 并向下滚动）时，这会缩小图像，使其变小（我相信每个人都知道它的作用）。
我的问题是，是否有一个 css 属性允许我保持图像缩放（即大小永远不会改变，它仍然跨越整个网页），而不管放大和缩小窗口？
我已经用谷歌搜索了我的答案，检查了 w3school 等，但一切似乎都链接到实际上下滚动网页并保持图像静态，这不是我想要的。
这是我的网页通常的样子：https://gyazo.com/bf2a6cbcd8bda136c371278c2ca7c538
当我缩小时：https://gyazo.com/0a79d2142073fa0dec0eba60e8f9c5e4
我希望背景继续跨越整个页面，我不在乎导航栏/页脚大小的减小。
http://www.dragonstoneproductions.com/这个网站展示了我想要实现的目标（尝试缩小）。
非常感谢对某些资源的任何帮助/指针
.HTML：
<head>
<meta http-equiv="refresh" content="4">
<link href="main1.css" rel="stylesheet">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
</head>
<header>
<nav>
<ul>
<li class="active"><a href="index.html"><strong>Home</strong></a></li>
<li><a href="about.html"><strong>About Me</strong></a></li>
<li><a href="portfolio.html"><strong>Portfolio</strong></a></li>
<li><a href="contact.html"><strong>Contact</strong></a></li>
<li><a href="links.html"><strong>Links</strong></a></li>
</ul>
</nav>
</header>
<body>
</body>
<footer>
<div class="col">
Copyright © 2016<br>
<span style="font-size:0.6em;">HTML5 | CSS3 | JavaScript</span></span></div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/linkedin.png" alt="My LinkedIn" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/gmail.png" alt="Email Me" height="41" width="50" border="0">
</a>
</div>
<div class="col">
<a href="http://www.w3schools.com">
<img src="images/bitbucket.png" alt="My BitBucket" height="41" width="50" border="0">
</a>
</div>
</footer>
.CSS：
body {
margin: 0;
}
header {
background: url(images/bg-image.jpg) center no-repeat fixed;
width: 100%;
height: 100%; /* viewport units are good for sizing big containers */
background-color: red;
background-size: cover;
}
.tint img {
opacity: 0.8;
background-size: cover;
}
nav {
position: fixed;
top: 0;
left: 0;
right:0;
background: rgba(139,23,28, 0.5);
padding-top: 5px;
padding-bottom: 5px;
}
nav h1 {
display: inline;
font-family: lobster;
color: #fff;
padding-left: 30px;
padding-right: 60px;
}
nav ul {
display: inline;
text-align : right;
}
nav ul li {
font-family: arial;
display: inline-block;
list-style-type: none;
padding: 5px 20px;
text-align: center;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
letter-spacing: 0px;
margin: 0;
font-size: 15px;
text-align: center;
}
footer {
background: #8B171C;
color: white;
width: 100%;
display: inline-block;
}
#copyright {
text-align: left;
padding-right: 150px;
display: inline;
}
.sociallink {
height: 30px;
width: 30px;
}
.col {
float: left;
margin: 1%;
}
答案在您链接的页面中：background-size: cover; .
有关如何在此处应用它的工作示例：http://codepen.io/wilman/pen/vGKqjm
body {
background: url(background.jpg) center no-repeat fixed;
background-size: cover; /* forces bg to span the entire screen */
background-color: #111;
color: #FFF;
}还要尽量避免将html img元素用于背景，因为它们不是很方便。请参阅何时使用 IMG 与.CSS背景图像？了解更多信息。