时间戳

首页 > 解决方案 > 在 Bulma CSS 中，如何保证导航栏品牌 logo 不被拉伸

bulma - 在 Bulma CSS 中，如何保证导航栏品牌 logo 不被拉伸

问题描述

这个问题与这个问题类似，但是那里提供的答案对我不起作用。

我正在努力确保我的导航栏的品牌标志没有被拉伸。当我按照说明操作时，只使用相关的导航栏代码，如下所示：

<!DOCTYPE html>
<html class="has-navbar-fixed-top">
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.0/css/bulma.min.css"
    />
  </head>
  <body>
    <nav class="navbar is-fixed-top" role="navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="/"
          ><img
            class="navbar-item"
            src="/inc/speakUniqueLogo.png"
            alt="SpeakUnique"
            width="88"
            height="79"
        /></a>
      </div>
    </nav>
    <main class="pageContent">This is the page content.</main>
  </body>
</html>

然后图像被压扁：

在此处输入图像描述

通过反复试验，我可以让它在桌面浏览器上正常显示，主要是通过删除宽度和高度属性，并navbar-item从<img>标签的类中删除，但这仍然会在移动设备上拉伸它（不是在 Chrome 移动模拟器上，而是在 iOS 设备上）。当我更仔细地按照说明进行操作时，它也会在桌面上拉伸。

bulma 中设置导航栏品牌徽标的正确方法是什么，这将使其在设备上看起来不错？

标签： bulma

解决方案

解决方案可以是这样的：

CSS

#header-logo{
  background: url(http://via.placeholder.com/160/640) no-repeat center center;
  background-size: cover;
  width: 152px
}

HTML

<nav class="navbar is-spaced has-text-weight-light" role="navigation">
  <div class="container">
    <div class="navbar-brand">
      <a id="header-logo" class="navbar-item" href="https://bulma.io">

      </a>

      <a role="button" class="navbar-burger" data-target="nav-menu">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="nav-menu" class="navbar-menu">
      <div class="navbar-start">
        <ul>

          <li><a href="#" class="navbar-item">pagelinks</a></li>

        </ul>
      </div>
    </div>
  </div>
</nav>

推荐阅读