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

我正在尝试使用Materialize.css框架在导航栏中调整徽标的大图像大小。使用CSS将徽标的高度和宽度减少到7%，这使得图像可以放在导航栏中。但是，此项目的缩略图的实际宽度（

），请提前感谢

HTML:

如果您确实希望
a
标签获得徽标的宽度，则应执行以下操作：

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

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

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

例如，您将看到它，正如您在本文中所看到的。
好的，如果这里有一个使用javascript的解决方案：

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

然后在css中添加以下内容以获得指针效果：

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

因此，图像的大小被调整，您希望
a
标记与图像的宽度相同吗？@gsamaras是的，我希望
a
标记与图像的宽度相同image@mtaggart我添加了一个新的答案，我认为这个答案对你很有用。我将这个jQuery添加到代码笔中，我可以看到缩略图，但有一些奇怪的原因儿子，真的图像不见了？@mtaggart我也是，我觉得它太小了。请看我的编辑。
      <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>

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/';
};

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