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

响应img的需求宽度：100％；为了响应，您可以使用其容器来控制图像大小，例如：

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

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

Answer 2

我找到了解决方案。我的结构就像

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

页脚div必须为高度：10％。但是我需要将所有其他元素的高度设置为100％（我之前没有做过）。否则它将扩展到那些之外。 “边界”

如何使img与div大小相同

2 个答案: