Question

我正在尝试在导航栏中放置徽标，并通过img响应式调整徽标大小，但实际上它不起作用-图像仍然很大。我不会手动更改大小。

/*
#logo-image {
  height: 50px;
}

*/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top" style="background-color: #bc001d">
  <div class="container">
    <a class="navbar-brand" href="/">
      <img id="logo-image" class="img-responsive" alt="Logo" src="https://dummyimage.com/200x200" /></a>
  </div>
</nav>

Answer 1

您可以添加屏幕截图吗？因为我试图将您的代码复制到我的引导网站上，所以效果很好。也许您需要使用max-height:50px; width: auto;而不是height，否则响应性就会消失。

Answer 2

在引导程序中，最好使用用户类.img-thumbnails

但是，如果您想使用css进行此操作，则可以像下面这样

.img-brand{
height:50px;
width:50px;
object-fit:contain;
}

Answer 3

更好地将宽度设置为％，这取决于容器的宽度来缩小图像！

    .img-responcive{
width:20%
}

Answer 4

可以通过添加.img-response类使Bootstrap 3中的图像响应友好。

这会将max-width: 100%;，height: auto;和display: block;应用于图像，以便将其很好地缩放到父元素。

您的问题是，图像的容器没有固定的宽度，因此它将缩放到最大宽度：100％导致大图。

另一个问题是，您的导航器没有固定的高度，因此徽标的大小将保持不变，并缩放标头。

您需要至少定义标题的大小，以及标题下方的所有子元素，以便在图像及其所有父对象上使用h-100，或在特定宽度下调整图像父对象的大小，以便可以使用图像响应。

如果您告诉BOOTSTRAP，它只能以最大大小响应地调整图像大小。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top" style="background-color: #bc001d; height: 50px;">
  <div class="nav_container h-100">
    <a class="navbar-brand h-100" href="/">
      <img id="logo-image" class="h-100" alt="Logo" src="https://dummyimage.com/200x200" /></a>
  </div>
</nav>

使用引导程序调整图像大小

4 个答案: