调整引导导航栏品牌标志的大小保持比例

Posted 2023-03-06

【中文标题】调整引导导航栏品牌标志的大小保持比例

【英文标题】：Resize bootstrap navbar brand logo keeping proportions

【发布时间】：2015-08-09 07:40:02

【问题描述】：

我想知道是否有办法动态调整导航栏品牌徽标图像的大小，使其具有导航栏本身的确切高度，并计算保持图像比例的宽度。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img  src="images/logo.png"></a>
    </div>

我尝试编辑 bootstrap .css 添加：

.navbar .brand > img  max-height: 40px; 

或：

.navbar .brand  
    max-height: 40px;
    max-width: 30%; 
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0; 

没有运气，图像仍然保持相同的巨大尺寸。

第一个应该可以解决问题，我希望将这些设置应用于带有 navbar-brand 类的 a 标记内的 img 标记内，但是，即使 css 正确刷新，这些设置也不会应用于我的图像.

【问题讨论】：

你能用jsfiddle发帖吗...

【参考方案1】：

在您提供的 CSS 中，您可能引用了错误的类名。您需要覆盖.navbar-brand 类，但您在.navbar 中引用了.brand 类名称。因此，样式不会应用于您想要的元素。

另外，您是否尝试在图片上使用class="img-responsive"？

<a class="navbar-brand" href="#"><img  src="images/logo.png" class="img-responsive" /></a>

否则，请查看这篇 *** 文章，因为它类似于：Bootstrap 3 Navbar with Logo。

希望这对您的事业有所帮助。

【参考方案2】：

我不知道，但这适用于引导 css

@media(*这里指的是屏幕大小) //这里表示图片图标类或属性 然后你可以在尺寸的限制下指定你想要的图像尺寸