时间戳

首页 > 解决方案 > Bulma - 导航栏徽标图像不适应导航栏高度。如何更改徽标图像适合度？

html - Bulma - 导航栏徽标图像不适应导航栏高度。如何更改徽标图像适合度？

问题描述

我刚刚开始使用 Bulma ( bulma.io ) 并希望此图像调整到导航栏高度，我相信默认情况下是 3.25rem （16px 基本字体大小），但事实并非如此。

我尝试将图像大小调整为 600px x 140px 不走运，我用谷歌搜索了很多，但仍然无法修复它。但是，如果我使用 600px x 140px 的示例 bulma 图像，它可以工作吗？这是使用 bulma 图像的代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<nav class="navbar">
  <div class="navbar-brand">
    <a  class="navbar-item" href="#">
      <img src="https://bulma.io/images/bulma-logo.png">
    </a>
  </div>
</nav>

或jsfiddle

我的代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<nav class="navbar">
  <div class="navbar-brand">
    <a  class="navbar-item" href="#">
      <img src="https://preview.ibb.co/bVUFKU/logo_transparent.png" alt="logo_transparent">
    </a>
  </div>
</nav>

或jsfiddle

标签： htmlcssbackground-imagenavbulma

解决方案

您所指的徽标图像640x640带有空白，您可以裁剪徽标图像或使用它，background-image如下所示

.navbar-item {
  background: url(https://preview.ibb.co/bVUFKU/logo_transparent.png) no-repeat center center;
  background-size: cover;
  width: 152px
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">

<nav class="navbar">
  <div class="navbar-brand">
    <a  class="navbar-item" href="#"></a>
  </div>
</nav>

推荐阅读