如何使用填充和边距设置使图像适合容器内部？

Question

我下面的css代码定义了body-content包装器类，我需要将图像放在包装器中，但是它们正在扩展它。

我尝试将包装器上的overflow设置为auto，但这也不起作用。

＆＃13;

＆＃13;

body {
    background-color:#231f20;
}
.body-content {
    padding-left:50px;
    padding-right:50px;
    margin-left:50px;
    margin-right:50px;
   
}

div.logoimg{
   background-image: url( https://i.stack.imgur.com/z3XY6.png);
   width:291px; 
   height:65px;
  
   max-width: 100%;
   max-height: 100%;
   float: left;
   overflow: auto;

}
.largeimg{

   background-image: url(https://i.stack.imgur.com/3B2Un.jpg);
   width:1460px; 
   height:369px;
   max-width: 100%;
   max-height: 100%;
   background-size: 100%;
   background-repeat: no-repeat;

   z-index: -1;
   overflow: auto;/*hidden;*/
   position: relative;
   display: block;
}
    .menu{
    padding-top:20px;
    padding-bottom: 9px;
    padding-left:20px;
    background-color: #231f20;
    float:left;
    width: auto;
    overflow: hidden;

}

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

.menu ul li {
    float: left;

}
.menu ul li  a {
    display: block;
    padding: 8px;
    background-color:#231f20;
    color:  #ffd41b;
} 
.menu ul li a:hover{
     display: block;
     background-color: #ffd41b;
     color:  #231f20;
}
.menu ul li.icon {
    display: none;
} 

＆＃13;

 <div class="body-content">
        <div class="logoimg"></div>
        <div class="menu" id="myMenu">

            <ul>
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About Us", "Index", "About")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
            </ul>
        </div>
        <div class="largeimg"></div>

＆＃13;

＆＃13;

＆＃13;

此结果页面如下所示：

我需要图像具有响应性，并且要在容器内部填充填充和边距，如下所示：

我试过在网上寻找解决方案，但我发现只有溢出的建议没有用。

如何让图像留在容器内？