纯CSS-Header img可以调整大小以适应较小的浏览器，但在较大的浏览器中会膨胀并被切断

我搜索了几乎所有可能的字串，试图找到这个问题的解决方案，但没有找到任何运气。下面是我的标题代码：

/* MAIN HEADER */

.header {
background-image: url(../images/kt-header2.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: fixed;
background-size: cover;
margin: 0;
padding-top: 0em;
padding-bottom: 5em;
overflow: hidden;
width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

据我所知，这是一片混乱，解决办法显而易见。我一直试图在没有css知识的情况下把事情拼凑起来，所以我在这里瞎了眼

---

我已经在这篇文章的第一条评论下面链接了一条代码的更新。因为我是一个新用户，所以我不能在这篇文章中放置超过2个链接。

您是否尝试在标题中添加设置的高度？如果添加设置的高度，它将不会被较大浏览器上的其他元素所克服

我添加了：

.header{height:100px；）

（使用了另一个图像）

---

感谢您花时间回复。不幸的是，这没有起作用！它取消了img对较小浏览器的响应，标题仍然被切断。在更改“padding bottom 12em；”和“background size:contain；”之后，它的响应速度很快，但标题下显示了我不想要的空白。我可以用在线图像重新创建它——有什么想法吗？