導航欄中的徽標已調整大小，但鏈接的縮略圖保留了原始比例

我正在嘗試使用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; 
    }

來源

2015-12-29 mtaggart

因此，圖像被調整大小，你希望'a'標籤獲得與圖像相同的寬度？ – gsamaras

@gsamaras是的，我希望'a'標籤與圖像的寬度相同 – mtaggart

@mtaggart我添加了一個新的答案，我認爲它對您會有好處。 –

好了，所以，如果這裏是一個工作使用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; 
}

來源

2015-12-29 20:43:52

如果你真的希望a標籤以獲得標誌的寬度，你應該這樣做：

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

這實際上會使a標記太小，因此您需要重新考慮徽標的大小。如果你這樣做：

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

例如，然後你會看到它，人們可以在此看到jsFiddle。

來源

2015-12-29 19:20:11 gsamaras

我把這個jQuery添加到了Codepen中，我可以看到縮略圖，但出於某種奇怪的原因，實際的圖像消失了？ – mtaggart

@mtaggart我也是，我覺得它太小了。看我的編輯。 – gsamaras

導航欄中的徽標已調整大小，但鏈接的縮略圖保留了原始比例

回答

相關問題