无法设置图像大小。从DIV边界消失

Question

我对DIV中的图像定位和尺寸有疑问。 我有一个我在特定DIV中使用的图像，我需要它来覆盖DIV的整个顶部。当我放大浏览器的比例，而不是在DIV中收缩时，图像消失并从DIV的右侧溢出。 此外，当我缩小比例时，图像从底部被切除。我知道问题在于高度，但我不知道如何解决它。

＆＃13;

＆＃13;

.main_body {
  background-color: white;
  margin: auto;
  margin-top: 150px;
  max-width: 78.3%;
  height: 500px;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
  -moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
  box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
}

.upper_main {
  background-image: url("upper_title.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 8%;
}

＆＃13;

<div class="main_body">
  <div class="upper_main">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

实施例：

Answer 1

为什么不简单地使用占据顶部条的整个宽度的图像：

＆＃13;

＆＃13;

.main_body {
  background-color: white;
  margin: auto;
  margin-top: 150px;
  max-width: 78.3%;
  height: 500px;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
  -moz-box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
  box-shadow: 0px 0px 15px 0px rgba(50, 50, 50, 0.87);
}

.upper_main img {
  width:100%;
}

＆＃13;

<div class="main_body">
  <div class="upper_main">
    <img src="https://lorempixel.com/300/50/" >
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

Flexbox是生命，Flexbox是我们的救星。

＆＃13;

＆＃13;

.main_body {
  background-color: white;
  margin: auto;
  margin-top: 10px;
  max-width: 78.3%;
  height: 500px;
  box-shadow: 0px 0px 15px 0px rgba(50,50,50,0.87);
  display: flex;
  flex-direction: column;
}
.upper_main {
  background-image: url("http://lorempixel.com/1000/100/sports/");
  background-repeat: no-repeat;
  background-size: cover;
  height: 8%;
}
.down {
  outline: red dashed 2px;
  flex-grow: 1;
}

＆＃13;

<div class="main_body">
  <div class="upper_main"></div>
	<div class="down"></div>
</div>

＆＃13;

＆＃13;

＆＃13;