В Bulma CSS, как убедиться, что марка navbar lo go не растянута - PullRequest
Новая
       14

В Bulma CSS, как убедиться, что марка navbar lo go не растянута

0 голосов
/ 19 февраля 2020

Этот вопрос похож на на этот , однако ответ, предоставленный там, не работает для меня.

Я пытаюсь убедиться, что марка моего navbar lo go не растянута. Когда я следую инструкциям и использую только соответствующий код навигационной панели, как этот: 

<!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>

Затем изображение сдавливается:

enter image description here

Методом проб и ошибок я могу заставить его нормально отображаться в браузерах рабочего стола, в основном, удаляя атрибуты width и height и удаляя navbar-item из класса тега <img>, но это все равно растягивает его на мобильных устройствах (не на * 1021). * мобильный эмулятор, но на iOS устройствах). Когда я следую инструкциям более внимательно, они также растягиваются на рабочем столе.

Как правильно в bulma установить марку navbar lo go, которая будет хорошо выглядеть на всех устройствах?

1 Ответ

1 голос
/ 24 февраля 2020

Решение может быть таким:

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>
...