How to make combination of images responsive in twitter bootstrap?

Question

I want the above five different images joined as this is header part of a webpage.

I used the lavalamp plugin and it works, but the webpage loses its responsiveness. On different devices, the header is not displayed in one line.

I tried to insert it in bootstrap. I inserted the lines of code of lavalamp CSS in bootstrap CSS file, shown here:

.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;*/
}

And the relevant HTML code part is as follows:

<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>

How to make it responsive?

Please reply as early as possible.

Thanks in advance.

Answer 1

First remove specific width and height from your image tag like bellow :

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

Then write in css :

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

and give a specific width of li element in percentage in this media query.

Answer 2

I am not 100% sure what you mean with responsive images. But if you just want to resize the images according to the screen width, you could try something like this:

.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%;
}

and the 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>

here is a jsfiddle