2

在此处输入图像描述

我想要加入以上五个不同的图像，因为这是网页的标题部分。

我使用了 lavalamp 插件，它可以工作，但网页失去了响应能力。在不同的设备上，标题不会显示在一行中。

我试图将它插入引导程序。我在 bootstrap 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>

如何让它响应？

请尽快回复。

提前致谢。

4

2 回答 2

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并在此媒体查询中以百分比形式给出元素的特定宽度。

于 2013-05-07T11:58:53.173 回答
0

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

于 2013-05-07T12:26:40.450 回答