Html 你的手机坏了吗？

我试图使一些图像有响应性，但每次都失败了

这是我的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>

我已经尝试将所有px更改为百分位，并尝试添加一些媒体查询，但什么都没有发生，我无法找到问题

---

任何建议都有助于我的学习经验。

你似乎还没有定义我的风格。下面可能会解决这个问题

.nature img {
max-width: 100%;
}

或者可以像这样使用jquery

---

为了生成响应性图像，需要将其宽度设置为100%，以便它们继承容器宽度。还可以设置最小和最大宽度，以提供一些边界。 还将“高度”设置为“自动”

示例如下：

---

你能做一个jsfiddle吗？responsive是一个相当广泛的术语。请解释一下你想要达到的目标。我正在努力使下面的事情具有响应性不，它使我的图像即将出现。我正在努力使这个www.plugindetector.com/mobilyblocks以响应的方式思考，而不是以你的方式发生：（确保js脚本不会干扰你的样式。

.nature img {
max-width: 100%;
}

.nature img{
    max-width:100% !important;
    height:auto;
    display:block;
}

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

*{
    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
}