使用CSS放大页面时图像的高度
我想为图像做一个最大高度，但当我垂直打开窗口大小时，它总是会放大。 我只想让图像水平响应。 我还应该提到，图像是相当大的，所以没有太多的重点放在整个图像的下半部分。 图像的上半部分是我试图隐藏的部分，同时仍然对其进行水平响应。
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
background-color:rgb(25, 0, 0);
}
.container {
margin:auto;
width:80%;
overflow:hidden;
background-color:white;
height:100%;
}
header {
text-align:center;
color:black;
padding:50px;
font-family:'dancing script';
font-size:50px;
background-color:#000000;
}
header nav {
width:50%;
margin:auto;
}
header nav ul li {
color:white;
list-style:none;
font-family:'old standard tt';
float:left;
font-size:16px;
margin:0 0 0 60px;
}
header nav ul li:first-child {
color:white;
list-style:none;
font-family:'old standard tt';
float:left;
font-size:16px;
margin:0 0 0 45px;
}
.left-links nav ul {
float:left;
margin: -30px 0 0 -60px;
}
.right-links ul {
float:right;
margin:-30px 0 0 0;
}
.banner {
background:url() no-repeat 0 -455px;
min-height:950px;
background-size:cover;
width:100%;
}<header>
<div class="logo">
<p><img src="individualphotos/kalafinalogo.gif" width="100px"></p>
</div>
<div class="left-links">
<nav>
<ul>
<li>Discography</li>
<li>Lyrics</li>
<li>Live Events</li>
</ul>
</nav>
</div>
<div class="right-links">
<nav>
<ul>
<li>Gallery</li>
<li>Interviews</li>
<li>Merchandise</li>
</ul>
</nav>
</div>
</header>
<div class="banner"></div>
<div class="container"></div>