如何在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