导航栏中的徽标调整了大小，但链接的缩略图保留了原始比例

我正试图使用Materialize.css框架在导航栏中为我的徽标调整大图像的大小。高度&使用CSS将徽标的宽度减少到7%，这使得图像可以放在导航栏中。然而，缩略图（<a>标签）的实际宽度仍然是1280px。

如何缩小缩略图的宽度以与相应的图像成比例？请参阅下面的代码-我还为这个项目提供了一个Codepen。提前感谢！

HTML:

    <html>
    <head>
      <title>Bill Test Page</title>
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
      <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>

      <nav>
        <div class="nav-wrapper white">
          <a href="#" class="brand-logo"><img src="http://www.vectortemplates.com/raster/batman/batman-logo-big.gif" id="logo" /></a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
          </ul>
        </div>
      </nav>

      <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script>
      <!-- Compiled and minified JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"> </script>
    </body>
    </html>

CSS：

    #logo {
      height: 7%;
      width: 7%;
      padding: 7px;
    }
    .nav-wrapper #nav-mobile li a {
      color: black;
    }
    .nav-wrapper #nav-mobile li a:hover {
      background: black;
      color: white;
    }

好的，如果这里有一个使用javascript的解决方案：http://codepen.io/dirtysmith/pen/adBLyd

将html更改为：

      <nav>
        <div class="nav-wrapper white">
          <div id="imgWrapper" class="brand-logo"></div>
          <!--<a href="#" id="hyper" class="brand-logo"></a>-->
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
          </ul>
        </div>
      </nav>

添加此javascript:

var img = new Image();
var div = document.getElementById('imgWrapper');
img.onload = function() {
  div.appendChild(img);
};
img.src = 'http://www.vectortemplates.com/raster/batman/batman-logo-big.gif';
img.className = "logo";
img.onclick = function() {
    window.location.href = 'http://putyourlocationhere/';
};

然后为了给出指针效果，将其添加到css中：

.logo {
  width: 7%;
  height: 7%;
  padding: 7px;
  cursor: pointer; cursor: hand;
}

如果真的想要a标签获得徽标的宽度，你应该这样做：

$(".brand-logo").css("width", $("#logo").width());

这实际上会使a标签太小，因此您需要重新考虑徽标的大小。如果你这样做：

#logo {
   height: 50%;
   width: 50%;
   padding: 7px;
}

例如，您将看到它，正如您在这个jsFiddle中看到的那样。

相关内容

最新更新

热门标签：