如何在Twitter引導中對圖像進行響應組合？

Question

我想要上面的五個不同的圖像加入，因爲這是一個網頁的標題部分。

我使用lavalamp插件，它的工作原理，但網頁失去其響應能力。在不同的設備上，標題不會顯示在一行中。

我試圖將它插入引導。我插在引導CSS文件LavaLamp的CSS代碼行，如下所示：

.lavaLampWithImage { 
    margin-top:10px; 
    position: relative; 
    height: 55px; 
    /* width: 734px;*/ 
    /*width:780px;*/ 
} 

.lavaLampWithImage li { 
    float: left; 
    list-style: none; 
} 

.lavaLampWithImage li.back { 
    background: url("res/arrow.png") no-repeat right -30px; 
    z-index: 0; 
    padding-top:59px; 
    padding-left:40px; 
    position: absolute; 
} 

.lavaLampWithImage li.back .left { 
    background: url("res/arrow.png") no-repeat top left; 
    height: 30px; 
} 

.lavaLampWithImage li a { 
    z-index: 20; 
    display: block; 
    float: left; 
    position: relative; 
    overflow: hidden; 
} 

.mm { 
    border:0px; 
} 

#navbar { 
    /*margin-left:152px;*/ 
    /*padding-top:60px;*/ 
    padding-top:1px; 
    /*width:727px;*/ 
} 

及相關的HTML代碼部分如下：

<div class="span6"> 
    <div id="navbar"> 
     <ul class="lavaLampWithImage" id="1"> 
      <li><a href="index.html"><img class="mm" src="res/1.png" width="300" height="60" alt="home" onClick="location.href='index.html'"/></a></li> 
      <li class="current"><a href="index.html"><img class="mm" src="res/Home-n.png" width="120" height="60" alt="home" onClick="location.href='index.html'"/></a></li> 
      <li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img class="mm" src="res/blog.png" width="120" height="60" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></a></li> 
      <li><a href="help.html"><img class="mm" src="res/Help-n.png" width="120" height="60" alt="about us" onClick="location.href='help.html'"/></a></li> 
      <li><a href="contactus.html"><img class="mm" src="res/Contact_us-n.png" width="120" height="60" alt="contact us" onClick="location.href='contactus.html'"/></a></li> 
     </ul> 
    </div> 
    <div class="clear"></div> 
</div> 

如何使它響應？

請儘早回覆。

在此先感謝。

Answer 1

首先從您的圖片標籤中刪除特定的寬度和高度，像波紋管：

<li><a href="index.html"><img class="mm" src="res/Home-n.png" alt="home" onClick="location.href='index.html'"/></a></li> 

然後在CSS中寫：

@media only screen and (max-width:720px){ 
    .lavaLampWithImage li img { 
     max-width:100%; 
    } 
} 

，並在這個媒體查詢給li元素的特定寬度的百分比。

Answer 2

我不是100％確定你對響應圖像的含義。但如果你只是想調整根據屏幕寬度圖像，你可以嘗試這樣的事：

.lavaLampWithImage { 
    margin:10px 0 0; 
    padding:0; 
    display:block; 
    position: relative; 
    width:100%; 
} 
.lavaLampWithImage li { 
    display:inline-block; 
    list-style: none; 
    background-color:green; 
    width:15.38%; 
} 
.lavaLampWithImage li:first-child { 
    width:38.45%; 
} 
.lavaLampWithImage li a, .lavaLampWithImage li a img { 
    display:block; 
    width:100%; 
} 

和HTML：

<div class="span6"> 
    <div id="navbar"> 
     <ul class="lavaLampWithImage" id="nav1"> 
      <li><a href="index.html"><img class="mm" src="http://www.upsdell.com/BrowserNews/img/ban_300x60.png" alt="home" onClick="location.href='index.html'"/></a></li><li class="current"><a href="index.html"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="home" onClick="location.href='index.html'"/></a></li><li><a href="http://eywaz.com/sit2/MTA-2Website21-02/mta"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='http://eywaz.com/sit2/'"/></a></li><li><a href="help.html"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="about us" onClick="location.href='help.html'"/></a></li><li><a href="contactus.html"><img class="mm" src="http://www.motive.co.nz/glossary/img/banner-120x60.gif" alt="contact us" onClick="location.href='contactus.html'"/></a></li> 
     </ul> 
    </div> 
    <div class="clear"></div> 
</div> 

這裏是一個jsfiddle