图像自动调整大小时调整内部div的大小？

Question

我试图让这个图像自动调整大小，当浏览器大小更改工作正常，但绿色框仍然保持相同的宽度，我如何相对于外部div进行更改？否则，当图像大小变为一半时，绿色框占据图像的大部分。

我的HTML

<div class="hero-container">
    <img src="mri.png" class="main-bg" />
    <div class="box"><h3>Test Box Test Box Test Box </h3><p>This is a test box,This is a test box,This is a test box. </p></div>
</div>

我的CSS

.hero-container {margin:0 auto;display:block;max-width:1400px;width:100%;position:relative;height:100%;max-height:710px;overflow:hidden}

.box {
   float: left;
   position: absolute;
   left: 40px;
   top: 30px;
   z-index: 1000;
   background-color: #92AD40;
   padding: 5px;
   color: #FFFFFF;
   font-weight: bold;
   max-width:300px;
   max-height:300px;
}