HTML/CSS масштабирование изображения

Question

Я пишу свою собственную систему управления цветом с фиксированным юзербар, но у меня есть проблемы с изображениями в Юзербар:

Он должен выглядеть как этот

Но это выглядит следующим образом

я определил планку в CSS так:

#userbar { 
    background-color:#969696; 
    width: 100%; 
    height: 30px; 
    top:0px; 
    left:0px; 
    position:fixed; 
} 

#navcont { 
    padding: 5px 100px 5px; 
} 

#content { 
    padding-top: 5px; 
} 

#options ul li a { 
    padding: 5px 300px 5px; 
    top:0px; 
    left:0px; 
    position:fixed; 
    list-style: none; 
    /*list-style-type: none; 
    list-style-image: none; 
    list-style-position: outside;*/ 
} 

 

<div id='userbar'> 
    <div id='navcont'> 
     <?php 
      if(isset($_SESSION["userID"])) { 
       //Daten auslesen 
      } 
      else { 
       echo("Sie sind nicht angemeldet."); 
       echo("<div id='options'><ul style='list-style-item:none;'><li><a href='login'><img src='img/loginOptionsS.png' height='16px' width='16px'>Anmelden</a></li></ul></div>"); 
      } 
     ?> 
    </div> 
</div> 

Answer 1

вам не нужно точек с высоты и ширины изображения - только высота = '16' ширина = '16' - это хорошо ... В противном случае попробуйте это. Не уверен, что у вас есть какой-то img css, который перезаписывает вашу img-шкалу.

#userbar { 
 
    font-family: arial, sans-serif; 
 
    background-color: #969696; 
 
    width: 100%; 
 
    height: 30px; 
 
    top: 0px; 
 
    left: 0px; 
 
    font-size: 11px; 
 
    color: #fff; 
 
    text-align: center; 
 
    position: fixed; 
 

 
} 
 

 

 
#options { 
 
    display: inline-block; 
 
} 
 

 

 
#navcont { 
 
    padding: 7px 100px 7px; 
 
    margin: 0 auto; 
 
    width: 400px; 
 
} 
 

 

 
#content { 
 
    padding-top: 5px; 
 
} 
 

 

 
#options ul { 
 
    padding: 0px; 
 
    margin: 0px 0px 0px 10px; 
 
} 
 

 

 
#options ul li a { 
 
    color: #fff; 
 
    list-style: none; 
 
} 
 

 

 
#options ul li a img { 
 
    margin-right: 4px; 
 
    vertical-align: middle; 
 
}

<div id='userbar'> 
 
    <div id='navcont'>Sie sind nicht angemeldet. 
 
     <div id='options'> 
 
      <ul style='list-style:none;'> 
 
       <li><a href='login'><img src='http://placehold.it/16x16.jpg' height='16' width='16'>Anmelden</a> 
 

 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>