Bootstrap navbar Размер изображения

Я начал настраивать свой собственный сайт с помощью bootstrap/css и т. Д., И у меня есть основной внешний вид/макет, который я пытаюсь достичь, хотя я хочу заменить бренд navbar на образ, что я могу сделать; но с ограниченным успехом ...Bootstrap navbar Размер изображения

Я борется с получением гораздо большего изображения .svg для правильного масштабирования, чтобы сидеть в правильном пространстве - в настоящее время он удаляет сайт из любой пропорции. До этого у меня был .jpg, который выглядел отлично на рабочем столе, но сильно сосал на мобильном телефоне.

Вот код, который я получил за Navbar & изображения:

<html> 
    <head> 
      <title>Chris MacDonald Visualisation</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
      <link href = "css/bootstrap.min.css" rel = "stylesheet"> 
      <link href = "css/styles.css" rel = "stylesheet"> 
    </head> 
    <body> 

      <div class = "navbar navbar-inverse navbar-fixed-top" Role = "Navigation"> 
       <div class = "container"> 

         <div class = "logocontainer pull-left"> 
          <a class="navbar-brand" href="index.html"> 
           <img src="img/motif.svg"> 
          </a> 
         </div> 


        <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse"> 
         <span class = "icon-bar"></span> 
         <span class = "icon-bar"></span> 
         <span class = "icon-bar"></span> 
        </button> 



        <div class = "collapse navbar-collapse navHeaderCollapse"> 

         <ul class = "nav navbar-nav navbar-right"> 

          <li class = "active"><a href = "#">Works</a></li> 
          <li><a href = "services.html">Services</a></li> 
          <li><a href = "about.html">About Me</a></li> 
          <li><a href = "contact.html">Contact</a></li> 

         </ul> 

        </div> 

       </div>     
      </div>

Я надеюсь, что это имеет смысл для вас, ребят, это мой первого набег кодирования сайта и не использовать какое-то приложение, чтобы сделать это для меня. Если вы хотите увидеть, как выглядит эта проблема; www.cmvisual.com

Заранее спасибо.

источник

2014-02-03 Macker

Вы не закрыли свой логоконтейнер. Установка 'width' в img может работать. '.navbar-brand img {width: 123px; } '. –

Спасибо, что выделили это, отрегулировали его. Я до сих пор не могу понять, почему это не сработает. Я попытался добавить так много разных вещей в html и/или css для управления шириной/высотой, но я просто не могу ее изменить. – Macker

Вы используете SVG и согласно w3school «Изображение SVG начинается с элемента» иначе обычным способом. Ваше изображение слишком велико, вам нужно использовать короткое изображение, иначе вы можете поместить CSS для ширины. Но лучше всего вам следует использовать небольшое изображение.

источник

2014-02-03 17:54:15 Vivek

Несомненно, использование большого SVG обеспечивает лучшее разрешение на дисплеях сетчатки и т. Д.? Фактический размер файла SVG также очень мал, поэтому я не думаю, что пропускная способность должна быть слишком сильно затронута. Что означает «начинается с элемента»? – Macker

нравится, когда мы используем изображение svg, чем мы используем, чтобы поместить его в Проверьте это http://www.w3schools.com/svg/svg_inhtml.asp – Vivek

Bootstrap navbar Размер изображения

ответ

Смежные вопросы