height of an image when page enlarges with CSS

I want to make make a max-height for an image, but it always enlarges when I open the window size further vertically. I only want the image to be responsive horizontally. I should also mention that the image is quite large, and so there is not much focus on the content of the image which is the whole bottom half. The top half of the image is what I'm trying to hide whilst still making it responsive horizontally.

* {
  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>

链接地址: http://www.djcxy.com/p/64506.html

上一篇: 多少个线程太多？

下一篇: 使用CSS放大页面时图像的高度