不允许图像增长答案

【问题标题】：Don't allow image to grow不允许图像增长
【发布时间】：2021-05-18 08:12:09
【问题描述】：

我正在尝试使用 flexbox 在引导导航栏中插入图像，但是图像太大并且 flexbox 的增长超过了导航栏的大小，使其变得丑陋。如何限制图像大小以使其高度与另一个按钮的高度一样大（或者可能只是大一点）？代码：

  <nav class="navbar navbar-expand-lg navbar-light bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand">Resano Innovación</a>
      
      <div class="flexbox">
          <a class="nav-link active rounded" aria-current="page">Inicio</a>
          <a class="nav-link">Ubicación</a>
          <a class="nav-link">Contacto</a>
        
          <a class="navbar-brand" href="#">
            <img src="../img/eng.png" style="max-width: 100%; max-height: 100%;" alt="">
          </a>
        </div>
      </div>
    </div>
  </nav>

CSS：

.flexbox {
  display: flex;
  justify-content: flex-end;
}

【问题讨论】：

您可以将图像包装在容器中并设置 max-width / max-height
最大高度和宽度为 100%，因此它将显示图像的原始大小。将其更改为像素。最大高度：10px;
@ramilabbaszade 解决方案没有响应，对吧？
大多数网站不会针对不同的屏幕更改标志的大小。提供合适的像素就足够了

标签： html css twitter-bootstrap flexbox

【解决方案1】：

您可以将图像放在 div 中，并为响应式屏幕尺寸指定高度和宽度。此外，如果您为 img 元素提供这样的样式，它将是响应式图像。

  .img-div { 
  //assuming that you create this div and put image inside of it
     max-width:200px;
     height:100px;
   }


  img {
  max-width:100%;
  height:auto;
  object-fit:cover;
  }

【讨论】：