时间戳

首页 > 解决方案 > 不允许图像增长

html - 不允许图像增长

问题描述

我正在尝试使用 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;
}

标签： htmlcsstwitter-bootstrapflexbox

解决方案

您可以将图像放在 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;
  }

推荐阅读