響應式圖像引導

我希望我的圖像在導航欄中變得不響應而不使用媒體查詢，可能嗎？我是新來的HTML和CSS，我需要一些想法如何做到這一點。響應式圖像引導

這是最小化時的圖片，摺疊按鈕位於最上方。

這是我的導航欄的html。

<nav class="navbar navbar-default navbar-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
      <span class="icon-bar" ></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <img class="img-responsive" src="images/brandz.png" > 
     </div> 

    <div class="collapse navbar-collapse" id="nav-collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Students</a></li> 
     <li><a href="#">Faculty</a></li> 
     <li><a href="#">Contact us</a></li> 

    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
       <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       <!-- Modal --> 
        <div id="myModal" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
       <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
          </div> 
          <div class="modal-body"> 
           <p>Some text in the modal.</p> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
         </div> 
         </div> 
        </div> 
      </ul> 
     </div> 
     </div> 
     </nav>

這是我的導航欄css。

.navbar-default .navbar-nav > li > a { 
    font-weight: 590; 
    color: #949494; 
    display: block; 
    padding: 5px 35px 2px 45px; 
    border-bottom: 3px solid transparent; 
    line-height: 97px; 
    text-decoration: none; 
    transition: border-bottom-color 0.5s ease-in-out; 
    -webkit-transition: border-bottom-color 0.5s ease-in-out; 
    } 
    .navbar-default{ 
    background-color:#fff; 
    margin: 0; 

    } 
    .nav>li>a { 
    position: relative; 
    } 
    .navbar-default .navbar-right > li > a { 
    padding-left: 70px; 
    padding-right: 1px; 
    } 
    .navbar-default .navbar-toggle .icon-bar { 
    background-color: #000000; 
    margin:0 0 4px; 
    width: 25px; 
    height: 5px; 

    } 
    .nav.navbar-nav > li{ 
    display: :inline-block; 
    } 
    .nav.navbar-nav{ 
    list-style-type:none; 
    } 
    .nav.navbar-nav > li > a:hover{ 
    color:#a92419; 
    border-bottom-color: #a92419; 
    } 

    .navbar-default .navbar-toggle .icon-bar { 
    background-color:#a92419 ; 
    margin:0 0 4px; 
    width: 25px; 
    height: 5px; 

    } 
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ 
    background: none; 
    } 
    button.navbar-toggle{ 
    background:none; 
    border:none; 
    color:#000; 

    }

來源

2016-04-28 nethken

*「你好，我希望我的圖像在導航欄中能夠響應而不使用媒體查詢」* - 爲什麼？一般來說，不...沒有很多的JavaScript。 –

.img-responsive會使圖像響應容器的大小 - 你的容器.navbar-header是100％，所以圖像將是100％。你可以將它包裝在一個div中，尺寸較小。例如，50％。 – CheArmstrong

我想摺疊按鈕在圖像上進行排序。 – nethken

如果你可以改變代碼的結構就像下面你可以檢查bootply DEMO

<nav class="navbar navbar-default navbar-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
      <span class="icon-bar" ></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"> 
      <img class="img-responsive" src="http://s2.hulkshare.com/song_images/original/7/0/6/706218dbe06e5490bacd92adf773c870.jpg?dd=1388552400"> 
    </div>....(continue your next code...)

...

來源

2016-04-28 12:38:25

圖像太小了。：3 – nethken

@nethken你可以改變佈局作爲你的舒適度（即col-lg-2，col-lg-1等）。 –

所有這些都很小。 – nethken

如果圖像變換SVG格式，它會使較小的感謝img-responsive

來源

2016-04-28 12:30:43 JMF

我不明白你的先生。 – nethken

您必須通過brandz.svg修改brandz.png，更改圖片格式。然後圖像會使響應 – JMF

圖像被破壞，關於位置仍然相同的摺疊按鈕是在圖像下方的頂部。 – nethken

響應式圖像引導

回答

相關問題