如何調整品牌形象？

我有很大的品牌形象（logotipo-white），我想調整它的原始大小的30％。但是，當我應用以下代碼時，圖像顯得很小，但仍佔據原始空間，將導航鏈接推向另一行。

我該如何解決這個問題？

HTML：

<body> 
<div class = "navbar navbar-fixed-top"> 
    <div class = "navbar-inner"> 
     <div class = "container"> 
      <ul class = "brand"><img src="images/logotipo-white.png"></ul> 
      <ul class = "nav"> 
       <li class = "active"> 
        <a href = "#">Home</a> 
       </li> 
       <li><a href = "#">About</a></li> 
       <li><a href = "#">Portfolio</a></li> 
       <li><a href = "#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
</body>

CSS：

body{ 
background-image:url('../images/bg-green.jpg') ; 
} 
.brand img{ 
max-width: 30%; 
}

來源

2013-12-19 Kelvin Santos

這就是你所得到的？你想達到什麼目的？ http://jsfiddle.net/Ba7V2/ –

我嘗試了所有這些解決方案，但他們沒有奏效。也許我沒有很好地解釋自己。這裏是網站，除了navbar以外的一些內容：www.institutoalpha.org.br –

當你調整瀏覽器的導航鏈接到另一行:(注意，這個頁面有不一樣的html。重新制作此頁面以解決此問題。 –

在HTML中不使用UL爲您的品牌因爲這是不需要的，請使用a-tag代替：

<a class="brand" href="#"><img src="images/logotipo-white.png" /></a>

，並解決您的問題，在CSS中做到以下幾點：CSS：

.navbar .brand { 
    max-height: 40px; 
    max-width: 30%; 
    overflow: visible; 
    padding-top: 0; 
    padding-bottom: 0; 
}

來源

2013-12-19 15:41:23

如果它與引導建成，那麼一切都被放置在跨度。嘗試使跨度更小。

來源

2013-12-19 15:25:44

您不應該在<ul>的內部直接使用<img>。

的標記可能是這樣的：

 <ul class = "nav"> 
      <li class="brand"><img src="images/logotipo-white.png"></li> 
      <li class = "active"> 
       <a href = "#">Home</a> 
      </li> 
      <li><a href = "#">About</a></li> 
      <li><a href = "#">Portfolio</a></li> 
      <li><a href = "#">Contact</a></li> 
     </ul>

或者這樣：

 <ul class = "brand"><li><img src="images/logotipo-white.png"></li></ul> 
     <ul class = "nav"> 
      <li class = "active"> 
       <a href = "#">Home</a> 
      </li> 
      <li><a href = "#">About</a></li> 
      <li><a href = "#">Portfolio</a></li> 
      <li><a href = "#">Contact</a></li> 
     </ul>

或本：

 <div class = "brand"><img src="images/logotipo-white.png"></div><!--make me float/display:inline-block/other --> 
     <ul class = "nav"> 
      <li class = "active"> 
       <a href = "#">Home</a> 
      </li> 
      <li><a href = "#">About</a></li> 
      <li><a href = "#">Portfolio</a></li> 
      <li><a href = "#">Contact</a></li> 
     </ul>

來源

2013-12-19 15:33:06 Kraz

在的Joomla！ 3 template css add max-width：80％to .brand line 7137

.brand { 
    color: #001a27; 
    max-width: 80%; 
    -webkit-transition: color .5s linear; 
    -moz-transition: color .5s linear; 
    -o-transition: color .5s linear; 
    transition: color .5s linear; 
    }

來源

2017-02-08 15:24:46 user7535343

如何調整品牌形象？

回答

相關問題