Как получить img такого же размера, как div

Question

Я хочу сделать навигационную панель в нижнем колонтитуле с изображениями.Нижний колонтитул должен составлять 10% от общего экрана, и изображения должны быть в пределах этих 10%.Только я не получаю масштаб изображения в соответствии с размером экрана и намного больше.Что я делаю не так?

Я использую Bootstrap 4 и намереваюсь сделать мобильную версию своего сайта, но она не отображается хорошо.

<div class="footer navbar row">
 <div class="col-sm-2 menu_item">
<a href="#home" class="active"> 
    <img src="<source>" class="menu_img" alt="Logo"/>
</a>
 </div> 
 <div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
    </a>
  </div>
  <div class="col-sm-2 menu_item">              
    <a href="#contact">
        <img src="<source>" class="menu_img" alt="Logo"/>
    </a>
  </div>
  <div class="col-sm-2 menu_item">
  <a href="#contact">
    <img src="<source>" class="menu_img" alt="Logo"/>
   </a>
   </div>   
   <div class="col-sm-2 menu_item">
   <a href="#contact">
    <img src="<source>" class="menu_img" alt="Logo"/>
   </a>
   </div>

/* Place the navbar at the bottom of the page, and make it stick */ 
.navbar {
        background-color: var(--primary-color-1);
        overflow: hidden;
        position: fixed;
        bottom: 0;
        width: 100%;
        margin: 0px;
        height: 10vh;
    }
    /* Style the menu blocks */
    .menu_item {
        position: relative;
        padding: 2px 10px;
        margin: 0px;
    }
    /* Style the links inside the navigation bar */
    .navbar a {
        float: left;
        display: block;
        text-align: center;
        text-decoration: none;

    }
   /* Style the images/icons of the links */
    .menu_img {
        height:100%;
        width: 100%;
        object-fit: cover;
      }

Answer 1

Я нашел решение. Моя структура похожа на

<div class="footer">
  <div>
     <a>
       <img>
     </a>
   </div>
</div>

Div нижнего колонтитула должен быть высота: 10%. Но мне нужно установить высоту всех остальных элементов на 100% (чего я раньше не делал). В противном случае это будет распространяться за пределы тех. 'границы'

Answer 2

ширина ответа отзывчивого img: 100%; чтобы быть отзывчивым, вы можете контролировать размер изображения с его контейнером, например:

<div class="img-container">
    <img src="imgUrl"/>
</div>

img{
    width: 100%;
}
.img-container{
    width: 10%;
}