响应式图像引导

我希望我的图像在导航栏中变得不响应而不使用媒体查询，可能吗？我是新来的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

响应式图像引导

回答

相关问题