时间戳

首页 > 解决方案 > 如何使img与div大小相同

css - 如何使img与div大小相同

问题描述

我想在带有图像的页脚中创建一个导航栏。页脚需要占总屏幕的 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;
      }

标签： cssbootstrap-4

解决方案

响应式img的需要宽度：100%；为了响应，您可以使用他的容器控制图像大小，例如：

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

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

推荐阅读