트위터 부트 스트랩에서 이미지의 반응을 어떻게 만드나요?

Question

위의 5 가지 이미지가 웹 페이지의 헤더 부분으로 합쳐지기를 바랍니다.

lavalamp 플러그인을 사용했는데 작동하지만 웹 페이지의 응답 속도가 느려 집니 다. 다른 장치에서는 머리글이 한 줄로 표시되지 않습니다.

부트 스트랩에 삽입하려고했습니다.

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

가 반응하기 위해 어떻게 여기에 표시된 부트 스트랩 CSS 파일에 lavalamp의 CSS의 코드 라인을 삽입?

최대한 빨리 회신 해주십시오.

미리 감사드립니다.

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

그런 다음 CSS에서 쓰기 :

Answer 1

먼저 우는 소리처럼 이미지 태그에서 특정 폭과 높이를 제거

@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