0

我试图让一些图像响应但每次都失败。

这是我的html代码

<div class="wrapper">
    <div class="inner"> 
    <div style="margin-top:30px;"><img src="nature/logo.png"></div>

    <div id="content">

        <div class="socials">

        </div>  

        <div class="nature">
                <ul class="reset">
                <li><a href="#"><img src="nature/img7.png"alt="" /></a></li>
                <li> <a onClick="javascript:sendpage();" style="cursor:pointer;"><img src="nature/img2.png"alt="" /></a></li>
                <li><a href="#"><img src="nature/mg3.png"alt="" /></a></li>
                <li><a href="#"><img src="nature/img4.png"alt="" /></a></li>
                <li><a href="#"><img src="nature/img5.png"alt="" /></a></li>
                <li><a href="#"><img src="nature/img6.png"alt="" /></a></li>
                <li><a href="#"><img src="nature/img4.png"alt="" /></a></li>
          </ul> 
        </div>  

    </div>
</div>
    </div>

这在这个css文件之后

.nature {
display:block;
width:150px;
height:150px;
background:url(../nature/img1.png) no-repeat;
cursor:pointer;
position:relative;
}

.socials, .nature {
margin:0 auto;
}

.socials {
margin-bottom:50px;
}

ul.reset,
ul.reset li {
display:block;
list-style:none;
padding:0;
margin:0;
}
}

ul.reset li {
position:absolute;
}

ul.reset li a {
outline:none;
}

我尝试将所有 px 更改为百分位数，还尝试添加一些媒体查询，但没有发生任何事情，我无法找到问题

任何建议都会对我的学习体验很有帮助。

4

3 回答 3

1

为了制作响应式图像，请将它们的宽度设置为 100%，以便它们继承容器宽度。还要设置最小和最大宽度以提供一些边界。还将高度设置为自动。

这里的例子：http: //jsfiddle.net/vU9G4/5/

<div class="nature">
    <ul class="reset">
        <li><a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg" alt="" /></a></li>
    </ul> 
</div>

CSS：

*{
    margin:0px;
    padding:0px;
}

.nature {
    width:100%
    background:#000;
    cursor:pointer;
    position:relative;
}


ul.reset li {
    list-style:none;
    position:absolute;
}

ul.reset li a {
    outline:none;
}

ul.reset li a img{
    min-width:240px;
    width:100%;
    height:auto
}
于 2013-09-25T13:31:44.293 回答
0

您似乎没有为 . 以下应该可以解决它。

.nature img {
max-width: 100%;
}
于 2013-09-25T13:24:26.133 回答
0 
.nature img{
    max-width:100% !important;
    height:auto;
    display:block;
}

或者你可以像这样使用jquery ..

响应式图片

于 2013-09-25T13:28:13.220 回答